Vue 计算属性

模板内的表达式常用于简单的运算，当其过长或逻辑复杂时，会难以维护，于是出现了计算属性来解决该问题。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{ text.split(',').reverse().join(',') }}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            text: '123,456'
        },
    })
</script>
</body>
</html>

修改为：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{ reversedText }}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            text: '123,456'
        },
        computed: {
            reversedText: function () {
                //这里的this指向的是当前Vue实例
                return this.text.split(',').reverse().join('.')
            }
        }
    })
</script>
</body>
</html>

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