Vue 2.0的學習筆記：Vue的過濾器
轉自： https://www.w3cplus.com/vue/how-to-create-filters-in-vuejs.html
過濾器的介紹
1、在Vue中使用過濾器（Filters）來渲染數據是一種很有趣的方式。
2、首先我們要知道，Vue中的過濾器不能替代Vue中的methods、computed或者watch，
3、過濾器不改變真正的data，而只是改變渲染的結果，並返回過濾後的版本。
4、在很多不同的情況下，過濾器都是有用的，比如盡可能保持API響應的幹凈，並在前端處理數據的格式。
5、在你希望避免重復和連接的情況下，它們也可以有效地封裝成可重用代碼塊背後的所有邏輯。
6、在Vue 2.0中已經沒有內置的過濾器了，我們可以自定義過濾器。2.0之前有。在這裏有一個舊的內置過濾器的完整列表
定義和使用過濾器
1.全局和本地過濾器：你可以跨所有組件訪問全局過濾器，而本地過濾器只允許你在其定義的組件內部使用
全局過濾器
全局過濾器
來看一個簡單的示例。下面這個示例演示的是註冊一個全局過濾器，其作用就是在價格前面加上美元符號：
// 聲明一個全局的過濾器
Vue.filter(‘toUSD‘, function (value) {
return `$${value}`
})
// 在模板中這樣使用 文本插值的使用方式
<div id="app">
<h1>{{ price | toUSD}}</h1>
</div>
註意：過濾器定義必須始終位於Vue實例之上，否則你將會得到一個“Failed to resolve filter: toUSD”的錯誤信息。
本過過濾器
本地過濾器被註冊到一個Vue組件中。下面這個示例展示了本地過濾器是如何創建的。這個過濾器的功能是將字母變成大寫：
本地過濾器存儲在Vue組件中，作過filters屬性中的函數。這個時候你想註冊多少個就能註冊多少個：
let app = new Vue({
el: ‘#app‘,
data () {
return {
name: ‘w3cplus.com‘
}
},
// 聲明一個本地的過濾器
filters: {
Upper: function (value) {
return value.toUpperCase()
}，
Lower: function (value) {
return value.toLowerCase()
}
添加參數
正如前面提到過的，過濾器可以根據你需要添加一些參數進來。我們來看一個示例。比如說，我們創建博客的時候，都會有文章列表，每篇博客將會有一個文章摘要，然後提供一個“閱讀更多”的功能。我們這個示例就是來創建一個名為readMore的過濾器，它將把字符串的長度限制為給定的字符數，並將其附加到你的選擇的後綴中。Vue將被過濾的值作為第一個文本和長度，後綴作為第二個和第三個參數。示例代碼看起來像這樣：
// 聲明一個全局的過濾器readMore
// 這個過濾器傳了三個參數：text：文本內容, length：截取長度, suffix ：後綴
Vue.filter(‘readMore‘, function (text, length, suffix) {
return text.substring(0, length) + suffix
})
let app = new Vue({
el: ‘#app‘,
data () {
return {
articles: [
{
title: ‘CSS :focus-within‘,
summary: ‘CSS的世界真是一個神奇的世界。可能眾多前端開發者聽說過:focus並未聽說過:focus-within。那麽:focus-within是什麽鬼。‘
link: ‘//www.w3cplus.com/css/focus-within.html‘
},
{
title: ‘如何改變表單控件光標顏色‘,
summary: ‘表單大家應該不陌生，當然了，今天並不是來聊怎麽做表單或者處理表單的樣式網格。而是來聊聊怎麽改變表單控件中光標的顏色。不知道在大家心中，表單控件的光標顏色是根據color屬性來控制的。‘,
link: ‘//www.w3cplus.com/css/caret-color.html‘
}
]
}
}
})
<div id="app">
<ul>
<li v-for="article in articles">
<h2>
<a :href="article.link">{{ article.title }}</a>
</h2>
<div class="summary">
{{ article.summary | readMore(100, ‘...‘) }}
</div>
<div class="action">
<a :href="article.link">閱讀更多</a>
</div>
</li>
</ul>
</div>
過濾器串連
關於過濾器，我最喜歡的一件事是能夠使用管道（|）符號對它們進行串連，並通過一系列過濾器轉換一個值。讓我們再看一個價格的例子，並讓這個價格只保留兩位小數，然後加上美元符號。
雖然我們可以使用一個單獨的過濾器來實現它，但我們也可能想要使用toUSD過濾器。在這種情況下，分離和串連過濾器是一處方法：
Vue.filter(‘toFixed‘, function (price, limit) {
return price.toFixed(limit)
})
Vue.filter(‘toUSD‘, function (price){
return `$${price}`
})
let app = new Vue({
el: ‘#app‘,
data () {
return {
price: 435.333
}
}
})
<div id="app">
<h1>
{{ price | toFixed(2) | toUSD }}
</h1>
</div>
他的功能僅僅不像文章中的這麽簡單，他可以做任何你想做的事情。如果你對Vue其他的自定義過濾器功能感興趣的話，可以閱讀@wy-ei在Github上創建的Vue過濾器集合。
Vue 2.0的學習筆記：Vue的過濾器