计算属性缓存

作者: 一叶扁舟丶 | 来源:发表于2018-10-16 13:07 被阅读16次

在上一节中介绍指令与事件时,你可能发现调用methods里的方法也可以与计算属性起到同样的作用,比如本节示例可以用methods改写为

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例</title>

</head>
<body>

    <div id="app">
        <!-- 注意,这里的reversedText是方法,所以要带() -->
        {{ reversedText() }}
    </div>

    

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <script>

        var app = new Vue({
            el: '#app',
            data: {
                text: '123,456'
            },

            methods: {
                reversedText: function () {
                    // 这里this指向的是当前Vue实例
                    return this.text.split(',').reverse().join(',');
                }
                
            }
        });

        
            

    </script>

</body>
</html>