<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .red1 { color: red; } .line { font-size: 40px; } .show1 { color: blue; cursor: pointer; } </style> </head> <body> <div id="app"> <p>computed：计算属性</p> <div>{{fulName}}</div> <div>得到总价：{{totalprice}}</div> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: "#app", data: { firstName: "le01", lastName: "james", book: [ { id: 110, name: "编程艺术", price: 119 }, { id: 111, name: "代码大全", price: 125 }, { id: 112, name: "计算机原理", price: 98 }, ], }, computed: { fulName: function () { return this.firstName + "" + this.lastName; }, // 计算属性的复杂应用：处理数据，返回新数据到页面，有缓存作用,只有数据有变化才重新渲染 totalprice: function () { let result = 0; for (let i = 0; i < this.book.length; i++) { result += this.book[i].price; } return result; }, }, created: function () {}, }); </script> <script> // 对象定义 es5的写法 const obj = { name: "why", age: 18, run: function () { console.log("在奔跑"); }, eat: function () {}, }; // 1，属性的增强写法 const name2 = "www"; const height2 = 1.8; // es5写法 const obj = { name2: name2, height2: height2, }; // es6写法, 1，属性的增强写法 const obj = { name2, height2, }; // 2，函数的增强写法 const obj2 = { run() { console.log("在奔跑"); }, eat() {}, }; </script> </html>