與 AngularJS 類似，Vue.js 也有自己的數(shù)據(jù)轉(zhuǎn)換和過濾方法，但是必須記住，過濾器并不改變原始數(shù)據(jù)，它們只改變輸出并返回過濾后的數(shù)據(jù)。過濾器在很多不同的情況下都很有用，比如保持API響應(yīng)盡可能干凈，在前端處理數(shù)據(jù)的格式。希望通過將所有邏輯封裝在可重用代碼塊之后來避免重復(fù)和連接的情況下，它們同樣非常有效。

[[330672]]

定義和使用過濾器

使用 Vue，我們可以通過兩種不同的方式注冊過濾器：全局和本地。前者方式可以訪問所有組件中的過濾器，而后者則只能在定義該組件的組件內(nèi)部使用過濾器。

過濾器是簡單的 JS 函數(shù)，它們將要轉(zhuǎn)換的值作為第一個參數(shù)，但是也可以傳入盡可能多的其他參數(shù)來返回該值的格式化版本。

全局過濾器

全局過濾器如下所示：

// 在此示例中，我們將注冊一個全局過濾器用來在價格前面添加美元符號： 
 
// 聲明 
Vue.filter('toUSD', function (value)) { 
  return `$${value}` 
} 
// 使用 
<div id="app"> 
  <span>{{ 351.99 | toUSD }}</span> 
</div> 

過濾器定義必須始終在主Vue實例之上，否則會得到一個Failed to resolve filter: toUSD錯誤。

// DECLARATION 
Vue.filter('toUSD', function (value) { 
    return `$${value}`; 
}); 
 
new Vue({ 
    el: '#app', 
 
     data: { 
        price: 351.99 
    } 
}); 
 
// USAGE 
<div id="app"> 
  <span>{{ price | toUSD }}</span> 
</div> 

本地過濾器

本地過濾器注冊到一個Vue組件作用域中，來看看如何創(chuàng)建：

// 在此示例中，我們將創(chuàng)建一個過濾器，將字符串變成大寫。 
 
// 聲明 
new Vue({ 
    el: '#app', 
 
    data: { 
        name: 'scotch.io' 
    }, 
 
    filters: { 
       // Filter definitions 
        Upper(value) { 
            return value.toUpperCase(); 
        } 
    } 
}); 
 
// 用法 
<div id="app"> 
  <span>{{ name | Upper }}</span> 
</div> 

如上面的示例中看到的那樣，本地過濾器作為“filters”屬性內(nèi)的函數(shù)存儲在Vue組件中。我們可以注冊任意多個：

... 
    filters: { 
        Upper(value) { 
              return value.toUpperCase(); 
        }, 
        Lower(value) { 
            return value. toLowerCase(); 
        }, 
    } 
.... 

附加參數(shù)設(shè)置

正如我們在本文引言中所提到的，過濾器可以根據(jù)需要接受任意多個參數(shù)

// 聲明 
Vue.filter('readMore', function (text, length, suffix) { 
    return text.substring(0, length) + suffix; 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ab modi repellendus labore facere, fugiat ipsam quae accusantium commodi voluptas nesciunt dolor similique ipsum accusamus earum eligendi suscipit laborum quod.' 
    } 
}); 
 
// 用法 
<div id="app"> 
  <span>{{ text | readMore(10, '...') }}</span> 
</div> 

在此示例中，我們創(chuàng)建了一個名稱為“readMore”的過濾器，該過濾器會將字符串的長度限制為給定的字符數(shù)，并且還會在其中添加所選擇的后綴。Vue.js 將要過濾的值作為第一個參數(shù) text 傳遞，length 和 suffix 作為第二個和第三個參數(shù)傳遞。

鏈式過濾器

關(guān)于過濾器，我最喜歡的一點是能夠使用管道(|)符號將它們鏈接起來，并通過一系列轉(zhuǎn)換器運行單個值。再舉一個價格的例子，我們想限制價格的小數(shù)位以及加價格的單位。

// JS 
Vue.filter('toFixed', function (price, limit) { 
    return price.toFixed(limit); 
}); 
 
Vue.filter('toUSD', function (price) { 
    return `$${price}`; 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        price: 435.333 
    } 
}); 
 
// HTML 
 
<div id="app"> 
  <span>{{ price | toFixed(2) | toUSD }}</span> 
</div> 

示例

接下來，我們通過一些事例來鞏固一下。

將 JS 值轉(zhuǎn)換為JSON字符串

// JS 
Vue.filter('json', function (value) { 
    return JSON.stringify(value); 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        user: { 
            username: 'johndoe', 
            email: 'john@example.com', 
            countryCode: 'U.K.' 
        } 
    } 
}); 
 
 
// HTML 
<div id="app"> 
  <span>{{ user | json }}</span> 
</div> 

從對象數(shù)組中提取屬性值列表

Vue.filter('pluck', function (objects, key) { 
    return objects.map(function(object) {  
        return object[key]; 
    }); 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        users: [ 
        { 
            "id": 4, 
            "first_name": "Eve", 
            "last_name": "Holt" 
        }, 
        { 
            "id": 5, 
            "first_name": "Charles", 
            "last_name": "Morris" 
        }, 
        { 
            "id": 6, 
            "first_name": "Tracey", 
            "last_name": "Ramos" 
        } 
        ] 
    } 
}); 
 
 
// HTML 
 
<div id="app"> 
  <span>{{ users | pluck('last_name') }}</span> 
</div> 

返回給定索引處的元素

Vue.filter('at', function (value, index) { 
    return value[index]; 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        videos: ['Zi_XLOBDo_Y', 'sOnqjkJTMaA', 'sOnqjkJTMaA'] 
    } 
}); 
 
// HTML 
<div id="app"> 
  <span>{{ videos | at(1) }}</span> 
</div> 

返回給定列表中的最小值

// JS 
Vue.filter('min', function (values) { 
    return Math.min(...values); 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        ages: [23, 19, 45, 12, 32] 
    } 
}); 
 
// HTML 
 
<div id="app"> 
  <span>{{ ages | min }}</span> 
</div> 

隨機排列元素列表：

Vue.filter('shuffle', function (values) { 
    for (var i = values.length - 1; i > 0; i--) { 
        var j = Math.floor(Math.random() * (i + 1)); 
        var temp = values[i]; 
        values[i] = values[j]; 
        values[j] = temp; 
    } 
    return values; 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        cards: ['Lahire', 'Judith', 'Lancelot', 'Alexandre'] 
    } 
}); 
 
// HTML 
 
<div id="app"> 
  <span>{{ cards | shuffle }}</span> 
</div> 

返回數(shù)組的第一個元素：

Vue.filter('first', function (values) { 
    if(Array.isArray(values)) { 
        return values[0]; 
    } 
    return values; 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        consoles: ['PlayStation', 'Nintendo DS', 'Xbox', 'Atari'] 
    } 
}); 
 
// HTML 
<div id="app"> 
  <span>{{ consoles | first }}</span> 
</div> 

返回數(shù)組的最后一個元素

Vue.filter('last', function (values) { 
    if(Array.isArray(values)) { 
        return values[values.length - 1]; 
    } 
    return values; 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        consoles: ['PlayStation', 'Nintendo DS', 'Xbox', 'Atari'] 
    } 
}); 
 
// HTML 
<div id="app"> 
  <span>{{ consoles | last }}</span> 
</div> 

返回過濾指定元素的數(shù)組的副本

Vue.filter('without', function (values, exclude) { 
    return values.filter(function(element) { 
        return !exclude.includes(element); 
    }); 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        unpaidInvoices: ['#1001', '#1002', '#1003', '#1004'] 
    } 
}); 
 
// HTML 
<div id="app"> 
  <span>{{ unpaidInvoices | without('#1003') }}</span> 
</div> 

刪除數(shù)組中重復(fù)的元素

Vue.filter('unique', function (values, unique) { 
    return values.filter(function(element, index, self) { 
        return index == self.indexOf(element); 
    }); 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        recentViewedPosts: [13, 43, 23, 13, 43, 3, 98, 42, 65] 
    } 
}); 
 
// HTML 
 
<div id="app"> 
  <span>{{ recentViewedPosts | unique }}</span> 
</div> 

在字符串后加上文本

Vue.filter('prepend', function (string, prepend) { 
    return `${string}${prepend}`; 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        greeting: 'Hello' 
    } 
}); 
 
// HTML 
<div id="app"> 
  <span>{{ greeting | prepend(' World!') }}</span> 
</div> 

重復(fù)一個字符串n次

Vue.filter('repeat', function (string, times) { 
    return string.repeat(times); 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        greeting: 'Hello' 
    } 
}); 
 
// HTML 
 
<div id="app"> 
  <span>{{ greeting | repeat(3) }}</span> 
</div> 

總結(jié)

希望讀者們從這篇文章中能學(xué)到了一些東西，現(xiàn)在知道如何創(chuàng)建和使用過濾器，最重要的是，你現(xiàn)在可以重構(gòu)你的代碼，用過濾器來清理它。