previously: 写methods时没按照官方格式来写，结果居然没报错？
但是为什么不会报错还没弄懂，到时候看源码再回头解决吧
代码大概是这样：
methods: {
getFinalPrice1: function(price) {
return '$' + price.toFixed(2);
},
getFinalPrice2: function abcd(price) {
return '$' + price.toFixed(2);
},
getFinalPrice3(price) {
return '$' + price.toFixed(2);
}
},
打印：
<tr v-for="item in books">
<td>{
{item.id}}</td>
<td>{
{item.name}}</td>
<td>{
{item.date}}</td>
<td>{
{item.price.toFixed(2)}}</td>
<td>{
{getFinalPrice1(item.price)}}</td>
<td>{
{getFinalPrice2(item.price)}}</td>
<td>{
{getFinalPrice3(item.price)}}</td>
<td>{
{typeof(getFinalPrice1)}}</td>
<td>{
{typeof(getFinalPrice2)}}</td>
<td>
<button>-</button> {
{item.count}}
<button>+</button>
</td>
<td><button>删除</button></td>
</tr>
输出：
三种方式输出一样。。。
原因不知道，不过联想到了函数声明和函数表达式：
getFinalPrice1: function(price) {
return '$' + price.toFixed(2);
},
getFinalPrice2: function abcd(price) {
return '$' + price.toFixed(2);
},
很像：
/* 正常的函数表达式的写法 */
let getFinalPrice1 = function(price) {
console.log('1');
return 1;
}
/* 函数声明和函数表达式一起写，可能会报错，或者调用sum2（）时报错 */
let getFinalPrice2 = function sum2() {
console.log('2');
return 2;
}
调试用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
<style>
table,
th,
td {
border: 1px solid gray;
}
</style>
</head>
<body>
<!-- -->
<div id='app'>
<table>
<thead>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in books">
<td>{
{item.id}}</td>
<td>{
{item.name}}</td>
<td>{
{item.date}}</td>
<td>{
{item.price.toFixed(2)}}</td>
<td>{
{getFinalPrice1(item.price)}}</td>
<td>{
{getFinalPrice2(item.price)}}</td>
<td>{
{getFinalPrice3(item.price)}}</td>
<td>{
{typeof(getFinalPrice1)}}</td>
<td>{
{typeof(getFinalPrice2)}}</td>
<td>
<button>-</button> {
{item.count}}
<button>+</button>
</td>
<td><button>删除</button></td>
</tr>
</tbody>
</table>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
//books里每个对象都是一本书
books: [{
id: 1,
name: '操作系统',
date: '2020 - 2 - 23',
price: 20,
count: 1,
}, {
id: 2,
name: '数据结构',
date: '2020 - 2 - 23',
price: 30,
count: 1,
}],
},
methods: {
getFinalPrice1: function(price) {
return '$' + price.toFixed(2);
},
getFinalPrice2: function abcd(price) {
return '$' + price.toFixed(2);
},
getFinalPrice3(price) {
return '$' + price.toFixed(2);
}
},
});
/* 正常的函数表达式的写法 */
let getFinalPrice1 = function(price) {
console.log('1');
return 1;
}
/* 函数声明和函数表达式一起写，可能会报错，或者调用sum2（）时报错 */
let getFinalPrice2 = function sum2() {
console.log('2');
return 2;
}
</script>
</body>
</html>