过滤器filters适用于简单的逻辑处理，例如：对一些数据进行格式化显示。他的功能完全可以使用methods，computed来实现。过滤器可以进行全局配置，也可以进行局部配置：
① 全局配置：在构建任何Vue实例之前使用Vue.filter(‘过滤器名称’, callback)进行配置。
② 局部配置：在构建Vue实例的配置项中使用filters进行局部配置。过滤器可以用在两个地方：插值语法和v-bind指令中。
多个过滤器可以串联：{{msg | filterA | filterB | filterC}}
过滤器也可以接收额外的参数，但过滤器的第一个参数永远接收的都是前一个过滤器的返回值
需求：
从服务器端返回了一个商品的价格price，这个price的值可能是这几种情况：''、null、undefined、60.5
要求：
如果是'' 、null、undefined ，页面上统一显示为 -
如果不是，则页面上显示真实的数字即可。
在Vue3当中，已经将过滤器语法废弃了。
<body>
<h1>{{msg}}</h1>
<!-- 计算属性实现 formatPrice -->
<h2>商品价格：{{formatPrice}}</h2>
<!-- 方法实现 formatPrice2() -->
<h2>商品价格：{{formatPrice2()}}</h2>
<!-- 过滤器实现 放在插值语法中 -->
<h2>商品价格：{{price | filterA | filterB(3)}}</h2>
<!-- 过滤器放入到v-bind中 ，不能放到v-model中-->
<input type="text" :value="price | filterA | filterB(3)" />
</div>
<hr />
<!-- 全局过滤器 -->
<div id="app2">
<h2>商品价格：{{price | filterA | filterB(3)}}</h2>
</div>
<script>
// 4、 配置全局的过滤器。
Vue.filter("filterA", function (val) {
if (val === null || val === undefined || val === "") {
return "-";
}
return val;
});
Vue.filter("filterB", function (val, number) {
return val.toFixed(number);
});
const vm2 = new Vue({
el: "#app2",
data: {
price: 20.3,
},
});
const vm = new Vue({
el: "#app",
data: {
msg: "过滤器",
price: 50.6,
},
//1、方法实现需求
methods: {
formatPrice2() {
if (this.price === "" || this.price === undefined || this.price === null) {
return "-";
}
return this.price;
},
},
// 2、计算属性实现
computed: {
formatPrice() {
if (this.price === "" || this.price === undefined || this.price === null) {
return "-";
}
return this.price;
},
},
// 3、局部过滤器
/* filters: {
filterA(val) {
if (val === null || val === undefined || val === "") {
return "-";
}
return val;
},
//需求： 确保传递过来的数据val，保留两位小数。
filterB(val, number) {
console.log(val); //此时的值时filterA的返回值
return val.toFixed(number);
},
}, */
});
</script>
</body>