首页 > 代码库 > vue学习笔记 计算属性（四）

vue学习笔记 计算属性（四）

2024-09-02 23:59:38   214人阅读

计算属性就是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学习笔记 计算属性（四）


联系
我们