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

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供朝陽網(wǎng)站建設(shè)、朝陽做網(wǎng)站、朝陽網(wǎng)站設(shè)計(jì)、朝陽網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、朝陽企業(yè)網(wǎng)站模板建站服務(wù)，十多年朝陽做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

定義和使用過濾器

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

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

全局過濾器

全局過濾器如下所示：

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

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

// 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>

本地過濾器

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

// 在此示例中，我們將創(chuàng)建一個(gè)過濾器，將字符串變成大寫。  // 聲明 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組件中。我們可以注冊任意多個(gè)：

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

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

正如我們在本文引言中所提到的，過濾器可以根據(jù)需要接受任意多個(gè)參數(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)建了一個(gè)名稱為“readMore”的過濾器，該過濾器會將字符串的長度限制為給定的字符數(shù)，并且還會在其中添加所選擇的后綴。Vue.js  將要過濾的值作為第一個(gè)參數(shù) text 傳遞，length 和 suffix 作為第二個(gè)和第三個(gè)參數(shù)傳遞。

鏈?zhǔn)竭^濾器

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

// 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>

隨機(jī)排列元素列表：

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>

返回?cái)?shù)組的第一個(gè)元素：

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>

返回?cái)?shù)組的最后一個(gè)元素

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ù)一個(gè)字符串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>

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

文章名稱：Vue中怎么創(chuàng)建并使用過濾器
路徑分享：http://aaarwkj.com/article8/pdicip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站設(shè)計(jì)、搜索引擎優(yōu)化、域名注冊、標(biāo)簽優(yōu)化、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)