<div id="app">
<div>{{fullName}}</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
name: "<h1>Dell</h1>",
firstName: "sheng",
lastName: "jun yong",
age: 28
},
// 方式二
// 计算属性有缓存,第一次调用执行一次,只要与其相关属性不变,多次调用只会执行一次方法,节约性能
computed: {
// 调用{{fullName}}无需括号,fullName相当于一个属性this.fullName,该方法的返回值就是属性值
fullName: {
// vm.fullName 获取计算属性值,会调用get方法
get(){
console.log("------------")
return this.firstName + " " + this.lastName
},
// vm.fullName="bao gui" 设置计算属性值,会调用set方法
// name是fullName设置的值,会传进来
set(name){
var arr = name.split(" ")
this.firstName = arr[0]
this.lastName = arr[1]
}
}
},
})
</script>