美文网首页
vue 计算属性computed

vue 计算属性computed

作者: Gino_Li | 来源:发表于2019-04-15 00:42 被阅读0次

    computed计算属性

    对于任何复杂逻辑,你都应当使用计算属性

    <div id="app">
    //computed属性
        <input v-model="price2" type="text" />
        <div>
            commputed----
            {{add}}
        </div>
    //methods属性
        <input v-model="price1" type="text" />
        <div>
            methods----{{add2()}}
        </div>
        <div @click="test">{{total}}</div>
    </div>
    
    new Vue({
    el:'#app',
    data:{
        count:2,
        price1:'',
        price2:'',
        total:0,
        timer:0
    },
    //当computed里面的数据发生变化的时候,也会触发该函数
    //因此我们通常不用此属性来定义需要频繁操作的数据的方法
    methods:{ 
        add2(){
            console.log('methods')
            return this.count*this.price1; 
        },
        test(){
            console.log('我是点击事件来触发的');
            this.total = this.count*this.price1;
        }
    },
    
    //computed属性只有当自身的数据发生变化时才会再次触发该函数
    computed:{//计算属性
        add(){
            var num;
            //函数的节流或防抖
            //比如:做一个搜索功能,当用户输入文字的时候函数会一直执行,但我们是希望用户输入完成之后才执行函数,实现这种效果的方法,我们叫节流或防抖
            clearTimeout(this.timer);
              //箭头函数本身是没有this,但我们用到this的时候,他会找定义函数时所处环境的this
            this.timer =setTimeout(()=>{  
                console.log(this)//vue的实例化对象
            },1000)
            return this.count*this.price2; 
        }
    }
    })
    

    计算属性中的setter

    计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter

    <div id="app">
        <p>{{firstName}}---{{lastName}}---{{fullName}}</p>
    </div>
    
    var vm = new Vue({
        el: "#app",
        data: {
            firstName: 'li',
            lastName: "zongjian"
        },
        computed: {
            fullName: {
                get: function () {
                  //获取firstName和this.lastName的值
                    return this.firstName + ' ' + this.lastName;
                },
                set: function (newValue) {
                   //获取get中的返回值,并切割成数组
                    var names = newValue.split(' ');
                    console.log(names);//['fang','yuying']
                  //分别赋回
                    this.firstName = names[0];
                    this.lastName = names[1];
                }
            }
        }
    })
    
    vm.fullName = "fang yuying";  //当fullName发生改变时,同时改变firstName和lastName的值;
    

    相关文章

      网友评论

          本文标题:vue 计算属性computed

          本文链接:https://www.haomeiwen.com/subject/avzewqtx.html