Vue.js Computed

Posted on Edited on In Views: Disqus:

 

computed 範例

範例一、

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <p>{{ message }}</p>
        <p>{{ messageCounter }}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: '123456'
            },
            computed: {
                messageCounter: function () {
                    return this.message.length;
                },
            },
        });
    </script>

</body>

</html>

說明：

1、computed 與 method 的用法特性，基本上是相同的。

2、computed 與 method 不同的是，

當 vue 物件裡相依的變數有變動時，computed 會重新計算；

而不相依的變數有變動時，computed 不會重新計算；

但 method 不管變數有無相依，皆會重新計算。

 

範例二、

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <p>{{ message }}</p>
        <p>{{ messageCounter(100) }}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: '123456'
            },
            computed: {
                messageCounter() {
                    return function a(c) {
                        return c + 100;
                    }
                },
            },
        });
    </script>

</body>

</html>

說明：

第二個例子是 computed 的 function 用法。

 

參考資料：

Vue.js: 計算屬性 Computed