Vue.js - 计算属性和监视
一、computed计算属性
- 计算属性相对于方法的区别就在于计算属性存在缓存
- computed计算属性，可以使定义变量函数，返回新的函数值
<script>
window.onload = function () {
const vm = new Vue({
el: '#app',
data:{
firstName:'A',
lastName:'B',
},
computed:{
fullName1(){
return this.firstName + ' ' + this.lastName;
}
}
})
}
</script>
<body>
<div id="app">
姓： <input type="text" placeholder="First Name" v-model="firstName"><br>//双向数据绑定，input框中的内容可以随着用户的输入而改变
名： <input type="text" placeholder="Last Name" v-model="lastName"><br>//双向数据绑定，input框中的内容可以随着用户的输入而改变
姓名1(单向）：<input type="text" placeholder="Full Name1" v-model="fullName1"><br>//利用双向数据绑定，使input里的值可以随着fullName里的值的改变而改变
</div>
</body>
结果显示：
二、监听属性watch
- watch只能监听data数据域中的变量，当此被监听的变量发生变化时，执行相应的函数。
<script>
window.onload = function () {
const vm = new Vue({
el: '#app',
data:{
firstName:'A',
lastName:'B',
fullName1: ' '
},
watch:{
firstName:function (value) {
this.fullName1 = value + ' ' + this.lastName;
}
}
})
vm.fullName1 = 'A';
}
</script>
<body>
<div id="app">
姓： <input type="text" placeholder="First Name" v-model="firstName"><br>
名： <input type="text" placeholder="Last Name" v-model="lastName"><br>
姓名2(单向）：<input type="text" placeholder="Full Name2" v-model = "fullName1"><br>
</div>
</body>
三、设置计算属性
- computed中定义对象fullName3，在对象中再定义两个函数，其中set函数类似watch监听功能，当fullName3变化时，执行相应的功能
<script>
window.onload = function () {
const vm = new Vue({
el: '#app',
data:{
firstName:'A',
lastName:'B',
},
computed:{
fullName3:{
get(){
return this.firstName + ' ' + this.lastName;
},
set(value){
const names = value.split(' ')
this.firstName = names[0]
this.lastName = names[1]
}
}
}
})
}
</script>
<body>
<div id="app">
姓： <input type="text" placeholder="First Name" v-model="firstName"><br>
名： <input type="text" placeholder="Last Name" v-model="lastName"><br>
姓名3(双向）：<input type="text" placeholder="Full Name3" v-model="fullName3"><br>
</div>
</body>
结果：
