开发者学堂课程【Vue.js 入门与实战:使用 watch 监听文本框数据的变化】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/586/detail/8205
使用 watch 监听文本框数据的变化
本节来换一个思路,也能实现文本框的数据变化:
一、范例:视觉效果图及代码展示
<
b
ody>
<div id="app">
us2
<input type="text" v-mode1="firstname">+
<input type="text" v-model="lastname">=<input type="text" v-mode1="fullname">
</div>
<script>
//创建vue实例,得到viewModelvar vm =new vue( {
el:
’
#app
’
,
data: {
firstname :lastname:fullname : ''),
methods: i,
I
watch:{
//使用这个属性,可以监视
data
中指定数据的变化,然后触发这个
watch 中对应的
function
处理函数
,就是指 date 上面所有的数据,都可以用 watch 来达到监视。
‘firstname’:function(newVal,oldVal){
/
/Console.log(‘
监视到了 firstname
的变化
’)
//This.fullname = this.firstname + ‘-’ +this.lastname
//Console.log(newVal + ‘---’ +oldVal)
This.fullname = newVal +’--’ + this.lastname
},
‘lastname’:function(newVal){
This.fullname = this.lastname +’-’+ newVal}
}
视觉效果图如下:
这就是使用 watch 监听来实现名称案例。