Vue過濾器的介紹和使用
阿新 • • 發佈:2019-02-05
Vue.js允許自定義過濾器,可被用於一些常見的文字格式化。過濾器可以用在兩個地方:雙花括號插值和v-bind表示式。過濾器應該被新增在JavaScript表示式的尾部,由“管道”符號指示:
<!-- 在雙花括號中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
可以在一個元件的選項中定義本地的過濾器:
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
或者在建立Vue例項之前全域性定義過濾器:
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
過濾器函式總接收表示式的值作為第一個引數。且過濾器可以串聯:
{{ message | filterA | filterB }}
如上所示,filterA
被定義為接收單個引數的過濾器函式,表示式message
的值將作為引數傳入到函式中。然後繼續呼叫同樣被定義為接收單個引數的過濾器filterB
,將filterA
的結果傳遞到filterB中。
過濾器是JavaScript函式,因此可以接收引數:
{{ message | filterA('arg1', arg2) }}
這裡,filterA
被定義為接收三個引數的過濾器函式,其中message
的值作為第一個引數,普通字串'arg1'
arg2
的值作為第三個引數。
例如一個購物車介面,讀取json檔案獲取購物車內物品的相關資訊。對於單價的變數,讀取後需要加美元符號或者加小數點,可以使用過濾器
1、區域性過濾器
在js程式碼中
var vm = new Vue({
el:"#app",
data:{
totalMoney:0,
productList:[]
},
filters:{
formatMoney:function(value){
return "¥"+value.toFixed(2)
}
},
...
}
在HTML程式碼中:
<div class="cart-tab-2">
<div class="item-price">{{item.productPrice | formatMoney}}</div>
</div>
效果如下圖:
2、全域性過濾器
Vue.filter("money",function(value,type){
return "¥"+value.toFixed(2)+type;
})
<div class="cart-tab-4">
<div class="item-price-total">{{item.productPrice*item.productQuantity | money('元')}}</div>
</div>
效果: