Vue之watch监听
2020-04-20 本文已影响0人
DarknessShadow
应用场景
1、监听文本框数据的变化
2、监视路由地址的改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods: {},
watch:{
// 使用这个属性，可以监视data中指定数据的变化，然后触发这个watch中对应的function处理函数
// first_name这种形式的变量就需要使用引号括起来
'firstname':function (newVal, oldVal) {
// console.log('监视到了 firstname 的变化')
this.fullname = this.firstname + '-' + this.lastname;
},
'lastname':function (newVal, oldVal) {
this.fullname = this.firstname + '-' + this.lastname;
}
}
})
</script>
</body>
</html>
watch表示：它是Vue的一个属性，可以进行监视data中指定数据的变化，然后触发对应的function处理函数
特别注意：this.firstname后面不要带括号，否则会报错！！！！！
它有两个变量，newVal表示变化后的值，oldVal表示变化前的值
属性的命名：first_name像这种带下划线的就必须使用引号括起来
