常常我們想要對資料做處理的時候，會寫一些function去跑，然後顯示出想要的結果，而為了讓模板(View)可以專注在顯示資料，Vue有設計兩個選項物件屬性，filters跟computed，可以在這些屬性裡面將資料格式化處理或有運算邏輯的function，如此一來，View不會包含這些function，版面看起來會簡潔許多。

filters(過濾器)

Vue提供的filters可以讓你自定義過濾器，到了版本2.x，filters最主要的功能是將文字資料格式化，我們可以在filters中放入自己寫好的function，像是全部英文字母轉大寫、價錢數值的格式化等等。

filters的使用方法分為兩種：

1. mustache模板插值(mustache interpolations)

{{ message | filterA }}

2. v-bind表達式(v-bind expressions)

<div v-bind:id="message | filterA"></div>

filters的種類分為本地過濾器(local filter)與全局過濾器(global filter)：

1. 本地過濾器(local filter)

<div id="app">
    <span>{{ text | toUpperCase }}</span>
</div>

var vm = new Vue ({
    el: '#app',
    data: {
        text: 'hello vue'
    },
    filters: {
        toUpperCase(value) {
            return value.toUpperCase();
        }
    }
});

• run on JSFiddle

2. 全局過濾器(global filter)

用filters將資料的第一個字變成大寫，順便練習前面使用過的v-model。

<div id="app">
    <input type="text" v-model="mytext">
    <p>{{ mytext | capitalize }}</p>
</div>

Vue.filter('capitalize', function(value) {
    return value.charAt(0).toUpperCase() + value.slice(1);
});

var vm = new Vue ({
    el: '#app',
    data: {
        mytext: 'hello'
    }
});

• run on JSFiddle

filters可以用|串聯：

{{ message | filterA | filterB }}

filters是JavaScript函數，所以可以傳入參數：

{{ message | filterA('arg1', 'arg2') }}

computed(計算屬性)

假設我們把程式邏輯寫在View中...

<div id="app">
    <p>原始訊息：{{ message }}</p>
    <p>反轉訊息：{{ message.split('').reverse().join('') }}</p>
</div>

這還只是將文字倒轉的功能寫在View當中，當邏輯一多一複雜下去，模板裡就會寫很多function，如此一來就違反讓View專注在顯示資料的規則，變得很不簡潔。

這個computed的功能很強大，可以對資料做處理計算，而且它有cache，能避免重複處理資料，跟filters一樣，也是在computed裡放入function，不同的是，computed可以做比較複雜的資料處理，資料處理完之後就將資料回傳。

computed可以透過this從data取得資料並拿來做運算，兩者有相依性，data資料改變，computed也會更新。

範例1：將文字倒轉過來

<div id="app">
    <p>原始訊息：{{ message }}</p>
    <p>反轉訊息：{{ reverseMessage }}</p>
</div>

var vm = new Vue ({
    el: '#app',
    data: {
        message: 'Hello'
    },
    computed: {
        reverseMessage() {
            return this.message.split('').reverse().join('');
        }
    }
});

• run on JSFiddle

範例2：使用computed做文章摘要

當我們做網頁，想把一段文字縮短成幾個字，後面部分以...代替，也可以使用computed來做。

<div id="app">
    <p>原始內容：{{ content }}</p>
    <p>文章摘要：{{ summary }}</p>
</div>

var vm = new Vue ({
    el: '#app',
    data: {
        content: '`computed`的功能很強大，它可以對資料做處理，而且它有cache，可以避免重複處理資料，跟`filters`一樣，可以在`computed`裡放入`function`，不同的是，`computed`可以做比較複雜的資料處理。'
    },
    computed: {
        summary() {
            if (this.content.length > 30)
                return this.content.slice(0, 27) + '...';
            return this.content;
        }
    }
});

• run on JSFiddle

filters vs computed

• filters適合做簡單的文字格式處理。
• computed可用於做較複雜的邏輯運算處理。

computed vs methods

參考資料

• Vue.js - Filters
• How to Create Filters in Vue.js with Examples
• Method vs Computed vs Filter
• Vue.js: Filter 過濾器
• Vue.js (6) - 計算屬性