Vue中怎么創建并使用過濾器

Vue中怎么創建并使用過濾器，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

成都創新互聯專業為企業提供朝陽網站建設、朝陽做網站、朝陽網站設計、朝陽網站制作等企業網站建設、網頁設計與制作、朝陽企業網站模板建站服務，十多年朝陽做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

定義和使用過濾器

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

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

全局過濾器

全局過濾器如下所示：

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

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

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

本地過濾器

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

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

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

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

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

// 聲明 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.' } }); // 用法 {{ text | readMore(10, '...') }}

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

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

// 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 {{ price | toFixed(2) | toUSD }}

// 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 {{ user | json }}

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 {{ users | pluck('last_name') }}

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

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

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 {{ cards | shuffle }}

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 {{ consoles | first }}

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 {{ consoles | last }}

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 {{ unpaidInvoices | without('#1003') }}

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 {{ recentViewedPosts | unique }}

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

Vue.filter('repeat', function (string, times) { return string.repeat(times); }); new Vue({ el: '#app', data: { greeting: 'Hello' } }); // HTML {{ greeting | repeat(3) }}

關于 Vue中怎么創建并使用過濾器問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注創新互聯行業資訊頻道了解更多相關知識。

老熟女激烈的高潮_日韩一级黄色录像_亚洲1区2区3区视频_精品少妇一区二区三区在线播放_国产欧美日产久久_午夜福利精品导航凹凸

重慶分公司，新征程啟航

Vue中怎么創建并使用過濾器

其他資訊