vue官網(wǎng)過濾器
Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化铃诬。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開始支持)祭陷。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符號指示：
<!-- 在雙花括號中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
過濾器可以串聯(lián)：
{{ message | filterA | filterB }}
在這個例子中趣席，filterA 被定義為接收單個參數(shù)的過濾器函數(shù)兵志，表達(dá)式 message 的值將作為參數(shù)傳入到函數(shù)中。然后繼續(xù)調(diào)用同樣被定義為接收單個參數(shù)的過濾器函數(shù) filterB宣肚，將 filterA 的結(jié)果傳遞到 filterB 中想罕。
過濾器是 JavaScript 函數(shù)，因此可以接收參數(shù)：
{{ message | filterA('arg1', arg2) }}
這里霉涨，filterA 被定義為接收三個參數(shù)的過濾器函數(shù)按价。其中 message 的值作為第一個參數(shù)，普通字符串 'arg1' 作為第二個參數(shù)笙瑟，表達(dá)式 arg2 的值作為第三個參數(shù)楼镐。
例子
<html>
<head>
<title>filter</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{num | money}}
{{num | money | money2}}
<child :num='num | money'></child>
</div>
</body>
<script>
//定義全局過濾器
Vue.filter('money',function(value){
if(!value) return "";
value=value.toString();
return '$'+value;
})
// 全局引入組件
// Vue.component('child',{
// props:{
// num:String
// },
// template:'<div>組件<p>{{num}}</p></div>'
// });
let component={
props:{
num:String
},
template:'<div>組件<p>{{num}}</p></div>'
}
// vue實例
let vue =new Vue({
el:'#app',
data:{
num:20
},
//局部引入組件
components:{
child:component
},
//局部定義過濾器
filters:{
money2:function(value){
if(!value) return "";
value=value.toString();
return '￥'+value;
}
}
});
</script>
</html>
