Vue中使用watch字段监听文本数据的变化
2020-05-28 本文已影响0人
Jure_joe
- 实现文本数据变化的监听有两种方式，一种是使用
@keyup事件进行监听，另外一种是使用vue实例中使用watch字段进行监听 - 存在问题：只能监听有dom元素的
- 使用
@keyup进行监听的写法
<input type="text" v-model="firstname" @keyup="getfullName">+<input type="text" v-model="lastname" @keyup="getfullName">=<input type="text" v-model="fullname">
<script type="text/javascript">
const vm = new Vue({
data:{
firstname:'',
lastname:'',
fullname:''
},
methods:{
getfullName() {
this.fullname = this.firstname +'-'+this.lastname;
}
},
}).$mount('#app');
</script>
- 使用watch字段进行监听
- 优势：能监听非dom元素,如：用来监听路由地址的变化，
'$route.path':function(newVal,oldVal){} - 使用该字段，可以监听指定数据的变化，然后触发
watch中对应data字段中同名属性名的function处理函数，newVal指代最新输入文本,oldVal指代上次文本框中的文本值
<input type="text" v-model="firstn">+<input type="text" v-model="lastn">= <input type="text" v-model="fulln">
<script type="text/javascript">
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');
</script>
- 测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
第一种：使用@keyup事件
<input type="text" v-model="firstname" @keyup="getfullName">+<input type="text" v-model="lastname" @keyup="getfullName">=<input type="text" v-model="fullname">
<br>
<br>
第二种：使用watch
<input type="text" v-model="firstn">+<input type="text" v-model="lastn">= <input type="text" v-model="fulln">
</div>
<script type="text/javascript">
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');
</script>
</body>
</html>
