不积跬步,无以至千里;不积小流,无以成江海。

 

Vuejs语言基础

 

computed属性(计算属性):

1. 用来监控自己定义的变量(依赖了其它的值),该变量不在 data 里面声明,直接在computed里面定义;

2. 适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化,监控的这个值也就会发生变化;

3. 根据现有数据生成一个新数据,并且这两个数据会永久的建立关系包括缓存,当无关数据改变的时候,不会重新计算而是直接使用缓存中的值。

 

<div id="app">
    <p>计算属性fullName:{{fullName}}</p>
</div>

<script>
    var vm = new Vue({  
        el: '#app',  
        data: {  
            firstName: 'Foo',  
            lastName: 'Bar',  
        },  
        computed: {  
            fullName: function () {  
                return this.firstName + ' ' + this.lastName  
            }  
        }  
    })
</script>

 

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

computed:{
    fullName: {
        get: function(){
            return this.firstName + ' ' + this.lastName;
        },
        set: function(newValue){
            let names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
        }
    }
}

 

 

博客借鉴:https://www.cnblogs.com/gunelark/p/8492468.html

posted on 2020-10-24 21:30  smile学子  阅读(176)  评论(0编辑  收藏  举报