vue 监听表格里的数据变化_Vue中使用watch字段监听文本数据的变化

实现文本数据变化的监听有两种方式，一种是使用@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');