91在线一级黄片|91视频在线观看18|成人夜间呦呦网站|91资源欧美日韩超碰|久久最新免费精品视频一区二区三区|国产探花视频在线观看|黄片真人免费三级片毛片|国产人无码视频在线|精品成人影视无码三区|久久视频爱久久免费精品

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

新聞中心

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

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

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

定義和使用過(guò)濾器

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

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

全局過(guò)濾器

全局過(guò)濾器如下所示：

 
 
 
    
  
  
  
  1. // 在此示例中，我們將注冊(cè)一個(gè)全局過(guò)濾器用來(lái)在價(jià)格前面添加美元符號(hào)： 
    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.
 

 

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

 
 
 
    
  
  
  
  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.
 

 

本地過(guò)濾器

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

 
 
 
    
  
  
  
  1. // 在此示例中，我們將創(chuàng)建一個(gè)過(guò)濾器，將字符串變成大寫。 
    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.
 

 

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

 
 
 
    
  
  
  
  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è)置

正如我們?cè)诒疚囊灾兴岬降模^(guò)濾器可以根據(jù)需要接受任意多個(gè)參數(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)建了一個(gè)名稱為“readMore”的過(guò)濾器，該過(guò)濾器會(huì)將字符串的長(zhǎng)度限制為給定的字符數(shù)，并且還會(huì)在其中添加所選擇的后綴。Vue.js 將要過(guò)濾的值作為第一個(gè)參數(shù) text 傳遞，length 和 suffix 作為第二個(gè)和第三個(gè)參數(shù)傳遞。

鏈?zhǔn)竭^(guò)濾器

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

 
 
 
    
  
  
  
  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.
 

 

示例

接下來(lái)，我們通過(guò)一些事例來(lái)鞏固一下。

將 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.
 

 

從對(duì)象數(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.
 

 

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

 
 
 
    
  
  
  
  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.
 

 

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

 
 
 
    
  
  
  
  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.
 

 

返回過(guò)濾指定元素的數(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ù)一個(gè)字符串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)建和使用過(guò)濾器，最重要的是，你現(xiàn)在可以重構(gòu)你的代碼，用過(guò)濾器來(lái)清理它。


分享名稱：通過(guò)事例講解如果在Vue創(chuàng)建及使用過(guò)濾器
鏈接分享：http://m.jiaoqi3.com/article/cdesied.html

其他資訊