Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部。
作用:对内容(数据)进行过滤(二次操作/二次处理)
我给大家模拟一个场景
<body>
<div id="app">
<li v-for="item of items">
<span> 名称:{{item.name}} </span>
<span> - </span>
<span> 价格:{{rmb(item.price,'$')}} </span>
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
items:[
{id:1,name:"iphone",price:"88888"},
{id:2,name:"ipad",price:"66666"},
{id:3,name:"iMac",price:"199999"}
]
},
methods:{
rmb(price,flag){
return `${flag}` + (price / 100).toFixed(2);
}
}
})
</script>
</body>
浏览器反馈
上边是一个没有使用过滤器的,我们先再看一下使用过滤器的
<body>
<div id="app">
<li v-for="item of items">
<span> 名称:{{item.name}} </span>
<span> - </span>
<span> 价格:{{item.price | rmb("$")}} </span>
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// Vue.filter("过滤器名称",过滤的方式)
Vue.filter("rmb", function(price, flag){
return `${flag}` + (price / 100).toFixed(2);
})
let app = new Vue({
el: "#app",
data: {
items: [
{ id: 1, name: "iphone", price: "88888" },
{ id: 2, name: "ipad", price: "66666" },
{ id: 3, name: "iMac", price: "199999" }
]
}
})
</script>
</body>
我们可以看出,页面效果是完全一样的
过滤器的使用:很类似于管道流
管道流:获取到的第一个值,以参数(第一位)的形式传递给第二个
<span> 价格:{{item.price | rmb("$")}} </span>
是否使用过滤器:
取决于你是否需要多次使用,如果说,如果只是为了单纯的实现上述效果,没有后期需求,那上述两种方法的使用都可以,但是如果后期需求较多,那过滤器的优势就体现出来了
r4(r3(r2(r1(ppt,1),2),3),4) // 多次使用函数
r4(4) | r3(3) | r2(2) | r1(1) // 多次使用过滤器