<body>
<div id="app">
<h1> {{ message + ' ' + add + ' ' + sub }} </h1>
<!-- 这样写太繁琐了 不方便阅读 -->
<h1> {{ getMessage() }} </h1>
<!-- 方法1 调用方法 -->
<h1> {{ fullName }} </h1>
<!-- 计算属性基本使用 因为在计算属性computed里面的函数名字 会被解析成属性名 所以用的时候后面不用加() -->
<h1> 这几本书的总价格是：{{ maxPrice }} </h1>
<!-- 计算属性复杂使用 -->
</div>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "好好学习",
add: "天天向上",
sub: "lalalla",
books: [{ // 当要计算复杂类型的数据是 用计算属性来操作 用数组存储对象
id: 100,
name: "Unix编程艺术",
price: 119
}, {
id: 101,
name: "代码大全",
price: 102
}, {
id: 102,
name: "深入计算机原理",
price: 98
}, {
id: 103,
name: "现代操作系统",
price: 76
}]
},
computed: {
fullName: function() {
return this.message + " " + this.add + " " + this.sub;
},
maxPrice: function() { // 计算方法
let max = 0;
for (let i = 0; i < this.books.length; i++) {
max += this.books[i].price;
}
return max;
}
},
methods: {
getMessage() { // 用ES6里面的方法
return this.message + " " + this.add + " " + this.sub;
}
}
})
</script>
</body>