技術標籤：VueJSweb前端Vue過濾器js 過濾器

1、什麼是過濾器？

說到過濾，我們生活中也經常有過濾的操作，洗菜用篩子過濾掉水，實驗室做化學實驗過濾掉雜質。

　而開發中的過濾器是對即將顯示的資料做進一步的篩選處理，然後進行顯示，值得注意的是過濾器並沒有改變原來的資料，只是在原資料的基礎上產生新的資料。

2.過濾器的定義和舉例

過濾器分為區域性和全域性過濾器

• 區域性過濾器

new Vue({       
 filters: {      
    '過濾器名稱': function (value1[,value2,...] ) { 
       // 邏輯程式碼     
      } 
         }    
　　})    
 

舉例

一般銀行賬戶的金額，都需要一定的格式化，保留2位小數

<!-- 在雙花括號中 -->
<div>{{資料屬性名稱 | 過濾器名稱}}</div>
<div>{{資料屬性名稱 | 過濾器名稱(引數值)}}</div>

template>
    <div>
        <h3>過濾器</h3>
        <h4>格式化工資</h4>
        <p>{{money|moneyFormat}}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            money:3333
        }
    },
    filters: {
        moneyFormat(value) {
            return '¥' + Number(value).toFixed(2)
        }

    }
}
</script>
 

• 全域性過濾器

Vue.filter('過濾器名稱', function (value1[,value2,...] ) {  

//邏輯程式碼

})

在main.js中寫全域性過濾器

Vue.filter('globalMoneyFormat', function(value) {
  return '¥' + Number(value).toFixed(2)
});

元件中程式碼

<template>
    <div>
        <h3>過濾器</h3>
        <h4>格式化工資</h4>
        <p>{{money|globalMoneyFormat}}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            money:13333
        }
    }
}
</script>