<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<p>全名:{{fullName}}</p>
</div>
<script>
// 监听器能够用来监听data中数据的变化,并且执行相应的操作
var vm = new Vue({
el: '#app',
data: {
firstName: '李',
lastName: '白',
// 定义变量来接受新的全名
fullName: ''
},
// 创建监听器在watch属性中
watch: {
// 要监听谁,就将该变量拿过来作为一个函数名字, 这个函数中带有newVal, 和 oldVal两个参数,参数名字随意
firstName(newVal, oldVal) {
console.log(newVal, oldVal);
this.fullName = newVal + this.lastName
},
lastName(newVal, oldVal) {
this.fullName = this.firstName + newVal
}
}
// watch 和 computed对比
// 1. computed性能比watch更好,我们能用computed实现就用computed去实现
// 2. 涉及到异步数据的时候,就需要用watch
})
</script>
watch监听器的简单使用
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.