Vue2系列教程——计算属性 computed

Vue2 计算属性 computed

<template>
<span>{{fullName}}</span>
</template>
<script>
data: {
firstName: '张',
lastName: '三'
},
computed: {
fullName: {
// get有什么作用？当读取fullName时，get就会被调用，且返回值就作为fullName的值。
// get什么时候被调用？ 1.初次读取fullName时 2.所依赖的数据发生变化时
get(){
return this.firstName + this.lastName
// return '李四'
},
// set什么时候被调用？当fullName被修改时
set(){
this.firstName = '李'
this.lastName = '四'
}
}
}
</script>

　　

计算属性的简写形式：

<template>
	<span>{{fullName}}</span>
</template>
<script>
data: {
    firstName: '张',
    lastName: '三'
},
computed: {
    fullName() {     //这里的 fullName 是值，不是函数！！！
        return this.firstName + this.lastName   //将计算后的值返回给fullName
     }
}
</script>