1.计算属性的基本运用
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
例子:使用计算属性计算出商品的总价格
<body>
<div id="app">
<h2>总价格:{{totalPrice}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
books: [{
id: 110,
name: '代码大全',
prics: 120
}, {
id: 111,
name: 'Linux大全',
prics: 120
}, {
id: 112,
name: '现代操作系统',
prics: 120
}, {
id: 113,
name: '深入理解计算机原理',
prics: 120
}, {
id: 114,
name: 'JavaScript编程艺术',
prics: 120
}]
},
computed: {
totalPrice: function() {
let result = 0
for (let i = 0; i < this.books.length; i++) {
result += this.books[i].prics
}
return result
}
}
})
</script>
</body>
2.计算属性computed和methods的对比
- 两者的效果是一样的。
- computed是基于它的依赖缓存,只有相关依赖发生改变是才会重新取值。
- methods在重新渲染时,函数总会重新调用执行。
下方代码有函数getfullName()和计算属性fullName,他们运行的结果是一样的。
<body>
<div id="app">
<h2>{{firstname}} {{lastname}}</h2>
<h2>{{getfullName()}}</h2>
<h2>{{fullName}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
firstname: 'akOBE',
lastname: 'Bryant'
},
methods: {
getfullName: function() {
return this.firstname + ' ' + this.lastname
}
},
computed: {
fullName: function() {
return this.firstname + ' ' + this.lastname
}
}
})
</script>
</body>
3.计算属性computed的getter和setter
computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter 。
<body>
<div id="app">
{{fullName}}
</div>
<script>
const app = new Vue({
el: "#app",
data: {
firstname: 'akOBE',
lastname: 'Bryant'
},
computed: {
fullName: {
set: function() {
// 计算属性一般没有set方法,只读属性
},
get: function() {
return this.firstname + ' ' + this.lastname
}
}
}
})
</script>
</body>