<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Title>document</Title> <script src="./lib/vue-2.4.0.Js"></script></head><body> <div ID="app"> <!-- 分析： --> <!-- 1. 我们要监听到 文本框数据的改变，这样才能知道 什么时候去拼接 出一个 fullname --> <!-- 2. 如何监听到 文本框的数据改变呢？？？ --> <input type="text" v-model="firstname" @keyup="getFullname"> + <input type="text" v-model="lastname" @keyup="getFullname"> = <input type="text" v-model="fullname"> </div> <script> // 创建 Vue 实例，得到 viewmodel var vm = new Vue({ el: ‘#app‘,data: { firstname: ‘‘,lastname: ‘‘,fullname: ‘‘ },methods: { getFullname() { this.fullname = this.firstname + ‘-‘ + this.lastname } } }); </script></body></HTML> @H_301_4@
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Title>document</Title> <script src="./lib/vue-2.4.0.Js"></script></head><body> <div ID="app"> <input type="text" v-model="firstname"> + <input type="text" v-model="lastname"> = <input type="text" v-model="fullname"> </div> <script> // 创建 Vue 实例，得到 viewmodel var vm = new Vue({ el: ‘#app‘,data: { firstname: ‘‘,lastname: ‘‘,fullname: ‘‘ },methods: {},watch: { // 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数 ‘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.firstname + ‘-‘ + newVal } } }); </script></body></HTML>@H_301_4@ @H_301_4@ @H_301_4@ @H_301_4@ 总结
以上是内存溢出为你收集整理的Vue--名称案例，监听键盘事件@keyup--实时获取数据-----watch属性方法获取全部内容，希望文章能够帮你解决Vue--名称案例，监听键盘事件@keyup--实时获取数据-----watch属性方法获取所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）