文章目录
计算属性
vue的计算属性就是当其依赖的属性值发生改变的时候,这个属性值也会自动发生更新,和它相关的DOM部分也会同步发生更新。
<div id="app">
<div>姓: <input type="text" v-model="firstname"></div>
<div>名: <input type="text" v-model="lastname"></div>
<div>姓名: {{fullname}}</div>
<div>姓名: {{fullname}}</div>
</div>
new Vue({
el: '#app',
data: {
firstname: '',
lastname: ''
},
computed: {
fullname: function() {
return this.firstname + this.lastname
}
}
})
这时不管是改变firstname或者lastname,fullname的值都会自动更新。
计算属性是基于它们的响应式依赖进行缓存的,只有相关响应式依赖发生变化时才会重新求值。所以即使页面中有多个地方都用到fullname,但是firstname和lastname没有改变,计算属性会立即返回之前的计算结果,而不必再次执行函数。
计算属性的 setter
计算属性默认只有getter,不过我们可以在需要的时候提供一个setter。
fullname: {
get: function() {
return this.firstname + this.lastname
},
set: function(val) {
this.firstname = val.split('')[0]
this.lastname = val.split('')[1]
}
}
方法
<div id="app">
<div>姓: <input type="text" v-model="firstname"></div>
<div>名: <input type="text" v-model="lastname"></div>
<div>姓名: {{fullname()}}</div>
<div>姓名: {{fullname()}}</div>
</div>
new Vue({
el: '#app',
data: {
firstname: '',
lastname: ''
},
methods: {
fullname: function() {
console.log('eee');
return this.firstname + this.lastname
}
}
})
定义为方法,结果虽然是相同的,但是如果页面有多个地方都用到fullname的时候,会重复运行函数。
侦听器
<div id="app">
<div>姓: <input type="text" v-model="firstname"></div>
<div>名: <input type="text" v-model="lastname"></div>
<div>姓名: {{fullname}}</div>
</div>
new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
watch: {
firstname: function(val) {
console.log(val);
this.fullname = val + this.lastname
},
lastname: function(val) {
console.log(val);
this.fullname = this.firstname + val
}
}
})
如果是用侦听器的写法,需要监听多个属性的改变,这样看代码会显得很重复。