watch: 在vue中表示监听的意思 , 我们可以使用watch来响应数据的变化
需求 :
定义三个数 firstNumber , lastNumber , fullNumber. 当firstNumber和lastNumber发生改变时 , fullNumber也随之发生改变
方式一 : 事件绑定
<body><divid="app"><inputtype="text"v-model="firstNumber"@keyup="handlerFullName"><inputtype="text"v-model="lastNumber"@keyup="handlerFullName"><inputtype="text"v-model="fullNumber"></div><script>newVue({
el:"#app",
data:{
firstNumber:'',
lastNumber:'',
fullNumber:''},
methods:{handlerFullName(){this.fullNumber =this.firstNumber +this.lastNumber
}}})</script></body>
方式二 : 使用监听器
watch: 监听器 , 可以监听某个属性.
基本格式 : function(newVal , oldVal)
<body><divid="app"><inputtype="text"v-model="firstNumber"><inputtype="text"v-model="lastNumber"><inputtype="text"v-model="fullNumber"></div><script>newVue({
el:"#app",
data:{
firstNumber:'',
lastNumber:'',
fullNumber:''},
watch:{'firstNumber':function(newVal , oldVal){this.fullNumber = newVal +this.lastNumber
},'lastNumber':function(newVal , oldVal){this.fullNumber = newVal +this.firstNumber
}}})</script></body>
本文转载自: https://blog.csdn.net/qq_43216714/article/details/123026431
版权归原作者 小源同学r 所有， 如有侵权，请联系我们删除。
版权归原作者 小源同学r 所有， 如有侵权，请联系我们删除。