vue学习笔记 计算属性

Posted zhishaofei3

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue学习笔记 计算属性相关的知识,希望对你有一定的参考价值。

计算属性就是vue实例里的computed属性,对应一个对象,里面可以放各种方法,方法的作用就是可以生成和数据变量对应的计算后的变量,跟数据相关的复杂逻辑变量,都可以使用计算属性实现,computed里的函数名,对外就是一个变量,默认是getter。

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: #example,
        data: {
            message: Hello
        },
        computed: {
            // a computed getter
            reversedMessage: function () {
            // `this` points to the vm instance
                return this.message.split(‘‘).reverse().join(‘‘)
            }
        }
    })
</script>

 

如果想用setter,也可以手动添加。

var vm = new Vue({
    el: ‘#example‘,
    data: {
        message: ‘Hello‘
    },
    computed: {
        // a computed getter
        reversedMessage: {
            get: function () {
                // `this` points to the vm instance
                return this.message.split(‘‘).reverse().join(‘‘)
            },
            set: function (newValue) {
                this.message = newValue.split(‘‘).reverse().join(‘‘)
            }
        }
    }
});

vm.reversedMessage = ‘12345‘;

 

Vue实例中还提供了另外一个属性Watchers,用来观察变量的变化,如果有变量的值发生了改变,watch里的函数(和变量名一致)会触发。

var vm = new Vue({
    el: ‘#example‘,
    data: {
        message: ‘Hello‘
    },
    computed: {
        // a computed getter
        reversedMessage: {
            get: function () {
                // `this` points to the vm instance
                console.log(‘我了‘);
                return this.message.split(‘‘).reverse().join(‘‘)
            },
            set: function (newValue) {
                this.message = newValue.split(‘‘).reverse().join(‘‘)
            }
        }
    },
    watch: {
        message: function (newValue, oldValue) {
            console.log(1);
            console.log(newValue);
            console.log(oldValue);
        },
        reversedMessage: function (newValue, oldValue) {
            console.log(2);
            console.log(newValue);
            console.log(oldValue);
        }
    }
});

vm.reversedMessage = ‘12345‘;

 

以上是关于vue学习笔记 计算属性的主要内容,如果未能解决你的问题,请参考以下文章

Vuejs学习笔记-9.使用计算属性

VUE核心学习笔记

VUE核心学习笔记

vue-学习笔记2

vue视频学习笔记05

Vue2.x基础笔记学习