Vue 计算属性

作者: 寻找无名的特质 | 来源:发表于2022-10-06 06:01 被阅读0次

当某些属性与其它属性通过算法联动时，就可以将这些属性定义为计算属性，示例如下：

<body>
    计算属性
    <div id="app">
        <input v-model="a" />
        <div>
            {{b}}
        </div>
    </div>
    <script src="/lib/vue/vue.js"></script>
 
    <script>
        new Vue({
            el: '#app',
            data : {
               a:1
            },
            computed: {
                b() {
                    return this.a * 2;
                }
            }
        })
    </script>
</body>

如果遇到复杂的模板算法，可以考虑用计算属性进行替代。计算属性也可以调用计算属性，比如增加：
c() {
return this.b * 2;
}

并且定义的顺序没有关系。但是不能循环调用，否则会导致堆栈溢出。