vue使用watch实现事件监听

watch监听的数据对应的函数,有两个参数,一个是在原有的值上增加的值,一个是原有的值

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="../util/vue-2.4.0.js"></script>
 7 </head>
 8 <body>
 9 <div id="test">
10     <input type="text" v-model="firstname"> +
11     <input type="text" v-model="lastname"> =
12     <input type="text" v-model="fullname">
13 </div>
14 <script>
15     var vm1 = new Vue({
16         el:"#test",
17         data:{
18             firstname:"",
19             lastname:"",
20             fullname:""
21         },
22         methods:{},
23         created(){},
24         components:{},
25         router:{},
26         watch:{
27             "firstname":function (newValue,oldValue) {
28                 this.fullname = newValue + this.lastname
29             },
30             "lastname":function (newValue,oldValue) {
31                 this.fullname = this.firstname + newValue
32             }
33         }
34     })
35 </script>
36 </body>
37 </html>
复制代码

 

本文作者:Mahmud(مەھمۇد)

本文链接:https://www.cnblogs.com/mahmud/p/13501155.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   Mahmud(مەھمۇد)  阅读(195)  评论(0编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起