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