<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>