日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
通過事例講解如果在Vue創(chuàng)建及使用過濾器

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

成都創(chuàng)新互聯(lián)公司專注于清水河網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供清水河營銷型網(wǎng)站建設(shè)，清水河網(wǎng)站制作、清水河網(wǎng)頁設(shè)計、清水河網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)公司服務(wù)，打造清水河網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供清水河網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

定義和使用過濾器

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

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

全局過濾器

全局過濾器如下所示：

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

 

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

 
 
 
    
  
  
  
  1. // DECLARATION 
    2. 
  
  
  
  2. Vue.filter('toUSD', function (value) { 
    3. 
  
  
  
  3.     return `$${value}`; 
    4. 
  
  
  
  4. }); 
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6. new Vue({ 
    7. 
  
  
  
  7.     el: '#app', 
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.      data: { 
    10. 
  
  
  
  10.         price: 351.99 
    11. 
  
  
  
  11.     } 
    12. 
  
  
  
  12. }); 
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14. // USAGE 
    15. 
  
  
  
  15.  
    16. 
  
  
  
  16.   {{ price | toUSD }} 
    17.
 

 

本地過濾器

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

 
 
 
    
  
  
  
  1. // 在此示例中，我們將創(chuàng)建一個過濾器，將字符串變成大寫。 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. // 聲明 
    4. 
  
  
  
  4. new Vue({ 
    5. 
  
  
  
  5.     el: '#app', 
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.     data: { 
    8. 
  
  
  
  8.         name: 'scotch.io' 
    9. 
  
  
  
  9.     }, 
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.     filters: { 
    12. 
  
  
  
  12.        // Filter definitions 
    13. 
  
  
  
  13.         Upper(value) { 
    14. 
  
  
  
  14.             return value.toUpperCase(); 
    15. 
  
  
  
  15.         } 
    16. 
  
  
  
  16.     } 
    17. 
  
  
  
  17. }); 
    18. 
  
  
  
  18.  
    19. 
  
  
  
  19. // 用法 
    20. 
  
  
  
  20.  
    21. 
  
  
  
  21.   {{ name | Upper }} 
    22.
 

 

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

 
 
 
    
  
  
  
  1. ... 
    2. 
  
  
  
  2.     filters: { 
    3. 
  
  
  
  3.         Upper(value) { 
    4. 
  
  
  
  4.               return value.toUpperCase(); 
    5. 
  
  
  
  5.         }, 
    6. 
  
  
  
  6.         Lower(value) { 
    7. 
  
  
  
  7.             return value. toLowerCase(); 
    8. 
  
  
  
  8.         }, 
    9. 
  
  
  
  9.     } 
    10. 
  
  
  
  10. .... 
    11.

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

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

 
 
 
    
  
  
  
  1. // 聲明 
    2. 
  
  
  
  2. Vue.filter('readMore', function (text, length, suffix) { 
    3. 
  
  
  
  3.     return text.substring(0, length) + suffix; 
    4. 
  
  
  
  4. }); 
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6. new Vue({ 
    7. 
  
  
  
  7.     el: '#app', 
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.     data: { 
    10. 
  
  
  
  10.         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.' 
    11. 
  
  
  
  11.     } 
    12. 
  
  
  
  12. }); 
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14. // 用法 
    15. 
  
  
  
  15.  
    16. 
  
  
  
  16.   {{ text | readMore(10, '...') }} 
    17.
 

 

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

鏈?zhǔn)竭^濾器

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

 
 
 
    
  
  
  
  1. // JS 
    2. 
  
  
  
  2. Vue.filter('toFixed', function (price, limit) { 
    3. 
  
  
  
  3.     return price.toFixed(limit); 
    4. 
  
  
  
  4. }); 
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6. Vue.filter('toUSD', function (price) { 
    7. 
  
  
  
  7.     return `$${price}`; 
    8. 
  
  
  
  8. }); 
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10. new Vue({ 
    11. 
  
  
  
  11.     el: '#app', 
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.     data: { 
    14. 
  
  
  
  14.         price: 435.333 
    15. 
  
  
  
  15.     } 
    16. 
  
  
  
  16. }); 
    17. 
  
  
  
  17.  
    18. 
  
  
  
  18. // HTML 
    19. 
  
  
  
  19.  
    20. 
  
  
  
  20.  
    21. 
  
  
  
  21.   {{ price | toFixed(2) | toUSD }} 
    22.
 

 

示例

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

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

 
 
 
    
  
  
  
  1. // JS 
    2. 
  
  
  
  2. Vue.filter('json', function (value) { 
    3. 
  
  
  
  3.     return JSON.stringify(value); 
    4. 
  
  
  
  4. }); 
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6. new Vue({ 
    7. 
  
  
  
  7.     el: '#app', 
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.     data: { 
    10. 
  
  
  
  10.         user: { 
    11. 
  
  
  
  11.             username: 'johndoe', 
    12. 
  
  
  
  12.             email: 'john@example.com', 
    13. 
  
  
  
  13.             countryCode: 'U.K.' 
    14. 
  
  
  
  14.         } 
    15. 
  
  
  
  15.     } 
    16. 
  
  
  
  16. }); 
    17. 
  
  
  
  17.  
    18. 
  
  
  
  18.  
    19. 
  
  
  
  19. // HTML 
    20. 
  
  
  
  20.  
    21. 
  
  
  
  21.   {{ user | json }} 
    22.
 

 

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

 
 
 
    
  
  
  
  1. Vue.filter('pluck', function (objects, key) { 
    2. 
  
  
  
  2.     return objects.map(function(object) {  
    3. 
  
  
  
  3.         return object[key]; 
    4. 
  
  
  
  4.     }); 
    5. 
  
  
  
  5. }); 
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7. new Vue({ 
    8. 
  
  
  
  8.     el: '#app', 
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10.     data: { 
    11. 
  
  
  
  11.         users: [ 
    12. 
  
  
  
  12.         { 
    13. 
  
  
  
  13.             "id": 4, 
    14. 
  
  
  
  14.             "first_name": "Eve", 
    15. 
  
  
  
  15.             "last_name": "Holt" 
    16. 
  
  
  
  16.         }, 
    17. 
  
  
  
  17.         { 
    18. 
  
  
  
  18.             "id": 5, 
    19. 
  
  
  
  19.             "first_name": "Charles", 
    20. 
  
  
  
  20.             "last_name": "Morris" 
    21. 
  
  
  
  21.         }, 
    22. 
  
  
  
  22.         { 
    23. 
  
  
  
  23.             "id": 6, 
    24. 
  
  
  
  24.             "first_name": "Tracey", 
    25. 
  
  
  
  25.             "last_name": "Ramos" 
    26. 
  
  
  
  26.         } 
    27. 
  
  
  
  27.         ] 
    28. 
  
  
  
  28.     } 
    29. 
  
  
  
  29. }); 
    30. 
  
  
  
  30.  
    31. 
  
  
  
  31.  
    32. 
  
  
  
  32. // HTML 
    33. 
  
  
  
  33.  
    34. 
  
  
  
  34.  
    35. 
  
  
  
  35.   {{ users | pluck('last_name') }} 
    36.
 

 

返回給定索引處的元素

 
 
 
    
  
  
  
  1. Vue.filter('at', function (value, index) { 
    2. 
  
  
  
  2.     return value[index]; 
    3. 
  
  
  
  3. }); 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. new Vue({ 
    6. 
  
  
  
  6.     el: '#app', 
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.     data: { 
    9. 
  
  
  
  9.         videos: ['Zi_XLOBDo_Y', 'sOnqjkJTMaA', 'sOnqjkJTMaA'] 
    10. 
  
  
  
  10.     } 
    11. 
  
  
  
  11. }); 
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13. // HTML 
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.   {{ videos | at(1) }} 
    16.
 

 

返回給定列表中的最小值

 
 
 
    
  
  
  
  1. // JS 
    2. 
  
  
  
  2. Vue.filter('min', function (values) { 
    3. 
  
  
  
  3.     return Math.min(...values); 
    4. 
  
  
  
  4. }); 
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6. new Vue({ 
    7. 
  
  
  
  7.     el: '#app', 
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.     data: { 
    10. 
  
  
  
  10.         ages: [23, 19, 45, 12, 32] 
    11. 
  
  
  
  11.     } 
    12. 
  
  
  
  12. }); 
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14. // HTML 
    15. 
  
  
  
  15.  
    16. 
  
  
  
  16.  
    17. 
  
  
  
  17.   {{ ages | min }} 
    18.
 

 

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

 
 
 
    
  
  
  
  1. Vue.filter('shuffle', function (values) { 
    2. 
  
  
  
  2.     for (var i = values.length - 1; i > 0; i--) { 
    3. 
  
  
  
  3.         var j = Math.floor(Math.random() * (i + 1)); 
    4. 
  
  
  
  4.         var temp = values[i]; 
    5. 
  
  
  
  5.         values[i] = values[j]; 
    6. 
  
  
  
  6.         values[j] = temp; 
    7. 
  
  
  
  7.     } 
    8. 
  
  
  
  8.     return values; 
    9. 
  
  
  
  9. }); 
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11. new Vue({ 
    12. 
  
  
  
  12.     el: '#app', 
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14.     data: { 
    15. 
  
  
  
  15.         cards: ['Lahire', 'Judith', 'Lancelot', 'Alexandre'] 
    16. 
  
  
  
  16.     } 
    17. 
  
  
  
  17. }); 
    18. 
  
  
  
  18.  
    19. 
  
  
  
  19. // HTML 
    20. 
  
  
  
  20.  
    21. 
  
  
  
  21.  
    22. 
  
  
  
  22.   {{ cards | shuffle }} 
    23.
 

 

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

 
 
 
    
  
  
  
  1. Vue.filter('first', function (values) { 
    2. 
  
  
  
  2.     if(Array.isArray(values)) { 
    3. 
  
  
  
  3.         return values[0]; 
    4. 
  
  
  
  4.     } 
    5. 
  
  
  
  5.     return values; 
    6. 
  
  
  
  6. }); 
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8. new Vue({ 
    9. 
  
  
  
  9.     el: '#app', 
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.     data: { 
    12. 
  
  
  
  12.         consoles: ['PlayStation', 'Nintendo DS', 'Xbox', 'Atari'] 
    13. 
  
  
  
  13.     } 
    14. 
  
  
  
  14. }); 
    15. 
  
  
  
  15.  
    16. 
  
  
  
  16. // HTML 
    17. 
  
  
  
  17.  
    18. 
  
  
  
  18.   {{ consoles | first }} 
    19.
 

 

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

 
 
 
    
  
  
  
  1. Vue.filter('last', function (values) { 
    2. 
  
  
  
  2.     if(Array.isArray(values)) { 
    3. 
  
  
  
  3.         return values[values.length - 1]; 
    4. 
  
  
  
  4.     } 
    5. 
  
  
  
  5.     return values; 
    6. 
  
  
  
  6. }); 
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8. new Vue({ 
    9. 
  
  
  
  9.     el: '#app', 
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.     data: { 
    12. 
  
  
  
  12.         consoles: ['PlayStation', 'Nintendo DS', 'Xbox', 'Atari'] 
    13. 
  
  
  
  13.     } 
    14. 
  
  
  
  14. }); 
    15. 
  
  
  
  15.  
    16. 
  
  
  
  16. // HTML 
    17. 
  
  
  
  17.  
    18. 
  
  
  
  18.   {{ consoles | last }} 
    19.
 

 

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

 
 
 
    
  
  
  
  1. Vue.filter('without', function (values, exclude) { 
    2. 
  
  
  
  2.     return values.filter(function(element) { 
    3. 
  
  
  
  3.         return !exclude.includes(element); 
    4. 
  
  
  
  4.     }); 
    5. 
  
  
  
  5. }); 
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7. new Vue({ 
    8. 
  
  
  
  8.     el: '#app', 
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10.     data: { 
    11. 
  
  
  
  11.         unpaidInvoices: ['#1001', '#1002', '#1003', '#1004'] 
    12. 
  
  
  
  12.     } 
    13. 
  
  
  
  13. }); 
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15. // HTML 
    16. 
  
  
  
  16.  
    17. 
  
  
  
  17.   {{ unpaidInvoices | without('#1003') }} 
    18. 
  
  
  
  18.  
    19.

 

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

 
 
 
    
  
  
  
  1. Vue.filter('unique', function (values, unique) { 
    2. 
  
  
  
  2.     return values.filter(function(element, index, self) { 
    3. 
  
  
  
  3.         return index == self.indexOf(element); 
    4. 
  
  
  
  4.     }); 
    5. 
  
  
  
  5. }); 
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7. new Vue({ 
    8. 
  
  
  
  8.     el: '#app', 
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10.     data: { 
    11. 
  
  
  
  11.         recentViewedPosts: [13, 43, 23, 13, 43, 3, 98, 42, 65] 
    12. 
  
  
  
  12.     } 
    13. 
  
  
  
  13. }); 
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15. // HTML 
    16. 
  
  
  
  16.  
    17. 
  
  
  
  17.  
    18. 
  
  
  
  18.   {{ recentViewedPosts | unique }} 
    19. 
  
  
  
  19.  
    20.

 

在字符串后加上文本

 
 
 
    
  
  
  
  1. Vue.filter('prepend', function (string, prepend) { 
    2. 
  
  
  
  2.     return `${string}${prepend}`; 
    3. 
  
  
  
  3. }); 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. new Vue({ 
    6. 
  
  
  
  6.     el: '#app', 
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.     data: { 
    9. 
  
  
  
  9.         greeting: 'Hello' 
    10. 
  
  
  
  10.     } 
    11. 
  
  
  
  11. }); 
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13. // HTML 
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.   {{ greeting | prepend(' World!') }} 
    16. 
  
  
  
  16.  
    17.

 

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

 
 
 
    
  
  
  
  1. Vue.filter('repeat', function (string, times) { 
    2. 
  
  
  
  2.     return string.repeat(times); 
    3. 
  
  
  
  3. }); 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. new Vue({ 
    6. 
  
  
  
  6.     el: '#app', 
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.     data: { 
    9. 
  
  
  
  9.         greeting: 'Hello' 
    10. 
  
  
  
  10.     } 
    11. 
  
  
  
  11. }); 
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13. // HTML 
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.  
    16. 
  
  
  
  16.   {{ greeting | repeat(3) }} 
    17. 
  
  
  
  17.  
    18.

 

總結(jié)

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


本文題目：通過事例講解如果在Vue創(chuàng)建及使用過濾器
鏈接URL：http://www.dlmjj.cn/article/cdesied.html

其他資訊