实现文本数据变化的监听有两种方式,一种是使用@keyup事件进行监听,另外一种是使用vue实例中使用watch字段进行监听
存在问题:只能监听有dom元素的
使用@keyup进行监听的写法
+=
const vm = new Vue({
data:{
firstname:'',
lastname:'',
fullname:''
},
methods:{
getfullName() {
this.fullname = this.firstname +'-'+this.lastname;
}
},
}).$mount('#app');
使用watch字段进行监听
优势:能监听非dom元素,如:用来监听路由地址的变化,'$route.path':function(newVal,oldVal){}
使用该字段,可以监听指定数据的变化,然后触发watch中对应data字段中同名属性名的function处理函数,newVal指代最新输入文本,oldVal指代上次文本框中的文本值
+=
const vm = new Vue({
data:{
firstn:'',
lastn:'',
fulln:''
},
watch:{//firstn对应data中的firstn
firstn(newVal,oldVal) {
this.fulln = newVal +'-'+this.lastn;
},
lastn(newVal,oldVal) {
this.fulln = this.firstn +'-'+newVal;
}
}
}).$mount('#app');
测试代码
第一种:使用@keyup事件
+=
第二种:使用watch
+=
const vm = new Vue({
data:{
firstname:'',
lastname:'',
fullname:'',
firstn:'',
lastn:'',
fulln:''
},
methods:{
getfullName() {
this.fullname = this.firstname +'-'+this.lastname;
}
},
watch:{
firstn(newVal,oldVal) {
this.fulln = newVal +'-'+this.lastn;
},
lastn(newVal,oldVal) {
this.fulln = this.firstn +'-'+newVal;
}
}
}).$mount('#app');