计算属性 3

计算属性

在模板中双向绑定一些数据或表达式。但是表达式如果过长，或逻辑更为复杂时，就会变得雕肿甚至难以阅读和维护，比如

    <div id="app">

        <div>
            <!-- {{ text.split (',').reverse().join(',')}} -->
            {{reversedText}}
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        var app = new Vue({
            el: '#app',
            data: {
                text: '123,456'
            },
            computed: {
                reversedText() {
                    return this.text.split(',').reverse().join(',');
                }
            }
        })
    </script>

所有的计算属性都以函数的形式写在 Vue 实例内的 computed选项内，最终返回计算后的结果。

计算属性用法

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回 一个结果就可以。
除了上例简单的用法，计算属性还可以依赖多个 Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。例如，下面的示例展示的是在购物车内两个包裹的物品总价：