Vue 2.0的學習筆記：Vue的過濾器

轉自： https://www.w3cplus.com/vue/how-to-create-filters-in-vuejs.html 

過濾器的介紹

一、在Vue中使用過濾器（Filters）來渲染數據是一種頗有趣的方式。

二、首先咱們要知道，Vue中的過濾器不能替代Vue中的methods、computed或者watch，

三、過濾器不改變真正的data，而只是改變渲染的結果，並返回過濾後的版本。

四、在不少不一樣的狀況下，過濾器都是有用的，好比儘量保持API響應的乾淨，並在前端處理數據的格式。

五、在你但願避免重複和鏈接的狀況下，它們也能夠有效地封裝成可重用代碼塊背後的全部邏輯。

六、在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() 
　　　 }
　　} 
}) 
<div id="app"> <h1>{{ name | Upper }}</h1> </div>

　

添加參數

正如前面提到過的，過濾器能夠根據你須要添加一些參數進來。咱們來看一個示例。好比說，咱們建立博客的時候，都會有文章列表，每篇博客將會有一個文章摘要，而後提供一個「閱讀更多」的功能。咱們這個示例就是來建立一個名爲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過濾器集合。