初学Vue（四）-- 计算属性，监视方法

2024年2月13日 185次阅读 来源: Bill

计算属性与监视方法

计算属性 — computed

计算属性，顾名思义是可以计算数据的属性，为什么要特意出个计算属性呢，因为vue如果直接将两个数据加起来的话，使用加法计负数的算双向绑定数据时就会出现问题

计算属性用法 — computed

代码案例：加法计算器

  • 首先计算器我们想要用户输入所以建立两个双向绑定的变量数据
  • 在computed属性中让函数的返回的结果赋予变量数据c
  • 返回语句显示转换将两个双向绑定的数据转为Number型计算后将值返回
html部分：
<input type="text" v-model="a">+
<input type="text" v-model="b">=
{{c}}

js部分：
new Vue({
    el:'body',
    data:{
        a:"",
        b:"",
    },
    computed:{
        c:function(){
            return Number(this.a)+Number(this.b);
        }
    }
})

监视方法 — $watch

代码案例：加法计算器

  • $watch 方法是当监听的变量产生变化时会运行它的处理函数
  • 这个方法是Vue 实例的方法，所以创建一个变量a 来储存创建储存了想要监听的数据的Vue实例，在Vue实例后面接这个方法也是可以的。
html部分：
<input type="text" v-model="a">+
<input type="text" v-model="b">=
{{c}}

js部分：
var a = new Vue({
    el:'body',
    data:{
        a:'',
        b:'',
        c:''
    }
})
a.$watch('a',function(){
    a.c=Number(a.a)+Number(a.b);
});
a.$watch('b',function(){
    a.c=Number(a.a)+Number(a.b);
})
    原文作者：Bill
    原文地址: https://segmentfault.com/a/1190000019670173
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞