Vue的计算属性
什么是计算属性
我们知道,在模板(dom)中可以直接通过一些插值语法来显示一些data数据,但是有些情况,我们需要对多个数据进行处理之后再进行展示
- 比如,需要显示firstname和lastname:
computed:计算属性(其中也存放的function)
<h2>{{Fullname}}</h2>
<!-- computed计算属性 dom中用的时候不用加小括号-->
computed:{
Fullname:function () {
return this.firstname+' '+this.lastname
}
},
computed中不要起动词的名字,最好起属性的名字
computed的复杂操作
需求:在data中放一个数组books,里面有五本书,里面分别有书的各种属性,其中有一个属性为书的价格,要求在DOM中显示五本书的总价格
<div id="app">
<h2>总价格:{{allPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books:[
{id:1,name:'课本一',price:10},
{id:2,name:'课本二',price:10},
{id:3,name:'课本三',price:10},
{id:4,name:'课本四',price:10},
{id:5,name:'课本五',price:10},
]
},
computed:{
allPrice:function () {
let result = 0;
for(let i=0;i <this.books.length;i++){
result += this.books[i].price;
}
return result
}
}
})
</script>
注意代码中的for循环
computed的完整写法
//完整的computed写法
computed:{
fullName:{
set:function () {
},
get:function () {
return this.firstname+' '+this.lastname
}
}
}
//简写
computed:{
fullName:function () {
return this.firstname+ ' '+this.lastname
}
}
computed(计算属性)和methods(方法)
computed有缓存,只要值不变换,就不会重复的用其中的方法,而methods每调用一次都会运行一次方法
<div id="app">
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{getFullname()}}</h2>
<h2>{{getFullname()}}</h2>
<h2>{{getFullname()}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
firstname:'ya',
lastname:'nan'
},
computed: {
fullName: function () {
console.log('computed');
return this.firstname +' '+this.lastname
}
},
methods: {
getFullname:function () {
console.log('methods');
return this.firstname+' '+this.lastname
}
}
})
</script>