监视Vue中data的改变的操作

最新推荐文章于 2024-05-28 18:23:13 发布

小梦新靓

最新推荐文章于 2024-05-28 18:23:13 发布

阅读量2.3k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_43712187/article/details/103264108

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、引入案例

要求：实现一个数据改变另一个就随着这个数据地改变而改变

1.1、实现此情况的原生操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    分析：实现一个数据改变另一个就随着这个数据地改变而改变----
要时刻去监听文本框数据的改变
方式一：用键盘抬起事件来解决---调用方法
-->
    <script type="text/javascript" src="js/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="css/bootstrap-3.3.7.css">
</head>
<body>
<div class="app form-inline">
    <input type="text" class="form-control" v-model="first"  @keyup="gets">+
    <input type="text" class="form-control" v-model="second"  @keyup="gets">=
    <input type="text" class="form-control"  v-model="sum" @keyup="gets">
</div>
<script>
    new Vue({
        el:'.app',
        data:{
            first:'',
            second:'',
            sum:''
        },
        methods:{
             gets(){
this.sum= this.first+this.second;

               }
        }
    })
</script>
</body>
</html>

1.2、在vue中一个监听属性的对象是watch

使用这个属性，可以监视data中指定数据的变化，然后触发这个watch中对相应的function处理函数

里面是对象：要监视的data中数据的名字:函数的监视集合

他对应的函数里面有两个参数，一个是改变后的值，另一个是改变前的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    分析：实现一个数据改变另一个就随着这个数据地改变而改变----
要时刻去监听文本框数据的改变
方式一：用键盘抬起事件来解决---调用方法
-->
    <script type="text/javascript" src="js/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="css/bootstrap-3.3.7.css">
</head>
<body>
<div class="app form-inline">
    <input type="text" class="form-control" v-model="first">+
    <input type="text" class="form-control" v-model="second">=
    <input type="text" class="form-control"  v-model="sum">
</div>
<script>
    new Vue({
        el:'.app',
        data:{
            first:'',
            second:'',
            sum:''
        },
        methods:{
             gets(){
this.sum= this.first+this.second;

               }
        },
        watch:{

            //使用这个属性，可以监视data中指定数据的变化，然后触发这个watch中对相应的function处理函数
       //里面是对象：要监视的data中数据的名字:函数
            'first':function () {
      console.log("监视sum的变化");
       }
        }
    })
</script>
</body>
</html>

他对应的函数里面有两个参数，一个是改变后的值，另一个是改变前的值

new Vue({
    el:'.app',
    data:{
        first:'',
        second:'',
        sum:''
    },
    methods:{
        gets(){
            this.sum= this.first+this.second;

        }
    },
    watch:{

        //使用这个属性，可以监视data中指定数据的变化，然后触发这个watch中对相应的function处理函数
        //里面是对象：要监视的data中数据的名字:函数
        'first':function (vnew,vold) {
          console.log("改变后的值："+vnew);
            console.log("改变前的值："+vold);
        }
    }
})
//2
new Vue({
    el:'.app',
    data:{
        first:'',
        second:'',
        sum:''
    },
    methods:{
        gets(){
            this.sum= this.first+this.second;

        }
    },
    watch:{

        //使用这个属性，可以监视data中指定数据的变化，然后触发这个watch中对相应的function处理函数
        //里面是对象：要监视的data中数据的名字:函数
        'first':function (vnew,vold) {
        this.sum=this.first+this.second;
        },
        'second':function () {
            this.sum=this.first+this.second;
        }
    }
})

watch缺点：他需要监听每个data要写需要监听的几个函数比较麻烦
优点：watch可以监听路由，methods不可以

小梦新靓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
监视Vue中data的改变的操作

一、引入案例要求：实现一个数据改变另一个就随着这个数据地改变而改变1.1、实现此情况的原生操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!-- 分析：实现一个数据改变...
复制链接

扫一扫