vue中的监听事件（watch）

最新推荐文章于 2024-06-21 08:47:39 发布

SeeUa

最新推荐文章于 2024-06-21 08:47:39 发布

阅读量2w

点赞数 6

分类专栏： vue前端文章标签： vue

本文链接：https://blog.csdn.net/SeeUa/article/details/107672178

版权

使用watch这个可以监听data中指定数据的变化,然后触发watch中对应的function的处理

html:
在html里写下那个事件会让触发methods让data发生变化

 <input type="text" v-model="firstname" @keyup="getFullname">+

data:
这里是data里面的值

  data: {
   
            firstname: "",
            lastname: "",
            fullname: ""
        },

methods:
这里是让data数据改变的方法

 getFullname: function () {
   
//                this.fullname = this.firstname+this.lastname;
            }

watch:

关键：data名：函数（这样的格式）

‘firstname’: function(newVal,oldVal){
console.log(newVal + “–” + oldval)
}

watch: {
   
            //使用这个可以监听data中指定数据的变化,然后触发watch中对应的function的处理
            'firstname': function (newVal,oldVal) {
   

                console.log((newVal + "--" + oldVal));
            },
            'lastname': function (newVal,oldVal) {
   
                console.log((newVal + "--" + oldVal));
            }
}

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"

最低0.47元/天解锁文章

SeeUa

关注

6
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
vue中的监听事件（watch）

使用watch这个可以监听data中指定数据的变化,然后触发watch中对应的function的处理html:在html里写下那个事件会让触发methods让data发生变化 <input type="text" v-model="firstname" @keyup="getFullname">+data:这里是data里面的值 data: { firstname: "", lastname: "", ful
复制链接

扫一扫