开发者学堂课程【Vue.js 入门与实战：使用watch监听文本框数据的变化】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8205
使用watch监听文本框数据的变化
本节来换一个思路，也能实现文本框的数据变化：
一、范例：视觉效果图及代码展示
<body> <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 监听来实现名称案例。
