使用場景
- 用于模板中渲染的數(shù)據(jù)做過濾，包含數(shù)據(jù)的輸出格式等
- 比如說想輸出 ￥ + num + 元 這種數(shù)據(jù)的樣式
- 就可以用我們的過濾器來return表達(dá)式
全局局部
filter
Vue.filter(過濾器名,(v)=>{
return "￥"+v;
})
let Home={
filters:{
currency:(v)=>{
return "￥"+v
}
}
}
//使用過濾器的語法
{{ num | currency }}
- 小案例格式化數(shù)據(jù),返回￥ + num + 元
<body>
<div id="app">
{{ num | currency("$") }}
</div>
</body>
<script src="./js/vue.js"></script>
<script>
// 定義一個過濾器,來給數(shù)據(jù)加上￥
Vue.filter('currency',function(v){
//v是使用過濾器的數(shù)據(jù)
return '￥' + v + "元"
})
let vm = new Vue({
el:'#app',
data:{
num:10
},
//定義一個局部過濾器
filters:{
currency(v,sign="￥"){
//sign是默認(rèn)的符號
return sign + v + "元"
}
}
})
</script>
