vue计算属性

vue计算属性

基本用法：

计算属性也是用来存储数据，但具有以下几个特点：

a）数据可以进行逻辑处理操作

b）对计算属性中的数据进行监视，普通属性里面的值发生改变，计算属性的值也会发生改变

获取计算属性数据 跟 普通数据一样获取

<div class='box'>
    <ul>
        <li>{{msg}}</li><--普通属性数据获取-->
        <li>{{run}}</li><--计算属性数据获取-->
    </ul>
</div>

<script src='/static/vendor/vue/vue.min.js'></script>
<script>
    var app = new Vue({
        el: '.box',
        // 普通属性
        data: {
            msg:'数据',
             msg1:''
        },
        //计算属性
        computed:{
            //该函数必须有返回时，用来获取属性，称之为get函数
            //数据可以进行逻辑处理操作
            run:function(){
                return this.msg1 = '获取处理过后数据';
            }
        },
        methods:{

        }
    })
</script>

计算属性和方法的区别

计算属性可以进行逻辑处理操作，定义一个方法也可以实现类似功能，区别：

a）计算属性是基于他的依赖进行更新的，只有在先关依赖发生改变时才能进行更新变化

b）计算属性是有缓存的，只有相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果

不会多次执行，而方法是每次都会执行的

get和set

计算属性由两部分组成，get和set，分别用来获取计算属性和设置计算属性

默认只有get，如果需要set，要自己添加

<script src='/static/vendor/vue/vue.min.js'></script>
<script>
    var app = new Vue({
        el: '.box',
        // 普通属性
        data: {
            msg:'数据',
        },
        //计算属性
        computed:{
            //默认只有get，如果需要set，要自己添加
            run:{
                get:function(){
                    return this.msg = '获取处理过后数据';
                },
                set:function(val){
                    return this.msg = '赋值数据，进行加工处理，更新数据';
                }
            }

        },
        methods:{

        }
    })
</script>

上一篇：vue生命周期

下一篇：html5本地存储Web Storage