<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算属性的getter和setter</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div>{{name}}</div>
</div>
<script >
var vm = new Vue({
el:'#app',
data:{
firstName:"zy",
lastName:"l"
},
//计算属性 有缓存机制 依赖的值改变时才重新渲染
computed: {
name: {
get: function () {
console.log("计算了一次");
return this.firstName + " " + this.lastName
},
set: function (value) {
var arr =value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
})
</script>
</body>
</html>