Vue2中的过滤器是什么
什么是vue的过滤器
过滤器可以通俗理解成是一个特殊的方法，用来加工数据的
比如枚举值可以使用过滤器：如 1 2 3 4 对应 成功 失败 进行中 已退回 比如价格后面跟个过滤器，将价格格式化成小数点两位 比如时间格式化等，又比如可以过滤聊天中的某些脏话
过滤器怎么写
<div id="app">
<h3>过滤器基本使用</h3>
// <!--在双花括号中使用全局过滤器 格式：{{值 | 过滤器的名称}}-->
<p> {{content|contentFilter}} </p>
// <!--在v-bind中使用全局过滤器 格式：v-bind:id="值 | 过滤器的名称"-->
<p v-bind:id="1 | addZero">11</p>
<h3>过滤器接收参数</h3>
<p> {{ num1| add(num2,num3)}} </p>
</div>
Vue.filter('contentFilter', function (value) {
//全局过滤器
if (!value) {
return ""
}
return value.toUpperCase().replace('TMD', '*不许说脏话噢*').replace('SB', '*不许说脏话噢*')
})
Vue.filter("addZero",function(value){
// 如果value的值小于10则在前面添加0然后返回，否则直接返回value值
return value<10?"0" value:value;
});
new Vue({
el: '#app',
data: {
content: '小伙子,TMD就是个sb',
num1: 40,
num2: 60,
num3: 70,
},
filters: {
//局部过滤器(本地过滤器)
add(n1, n2, n3) {
return n1 n2 n3
}
}
})
注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器
局部过滤器优先于全局过滤器被调用
一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右
注意filter方法在vue3中已被废除
vue3要精简代码，并且filter功能重复，filter能实现的功能，methods和计算属性基本上也可以实现。把filter这方面的vue源码给删掉，这样更加方便维护。
例如
使用computed实现
<template>
<div id="app">
<ul v-for="(item, index) in arr" :key="index">
<li>快递公司:{{ item.deliverCompany }}</li>
<!-- 使用计算属性 -->
<li>运输状态:{{ computedText(item.expressState) }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{
deliverCompany: "京东快递",
expressState: "1",
},
{
deliverCompany: "顺丰快递",
expressState: "2",
},
{
deliverCompany: "中通快递",
expressState: "3",
},
{
deliverCompany: "邮政快递",
expressState: "4",
},
{
deliverCompany: "极兔快递",
expressState: "5",
},
{
deliverCompany: "某某快递",
expressState: null,
},
],
};
},
computed: {
computedText() {
// 计算属性要return一个函数接收参数
return function (state) {
switch (state) {
case "1":
return "待发货";
break;
case "2":
return "已发货";
break;
case "3":
return "运输中";
break;
case "4":
return "派件中";
break;
case "5":
return "已收货";
break;
default:
return "快递信息丢失";
break;
}
};
},
},
};
</script>
使用methods实现
<template>
<div id="app">
<ul v-for="(item, index) in arr" :key="index">
<li>快递公司:{{ item.deliverCompany }}</li>
<!-- 使用方法 -->
<li>运输状态:{{ methodsText(item.expressState) }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{
deliverCompany: "京东快递",
expressState: "1",
},
{
deliverCompany: "顺丰快递",
expressState: "2",
},
{
deliverCompany: "中通快递",
expressState: "3",
},
{
deliverCompany: "邮政快递",
expressState: "4",
},
{
deliverCompany: "极兔快递",
expressState: "5",
},
{
deliverCompany: "某某快递",
expressState: null,
},
],
};
},
methods: {
methodsText(state) {
switch (state) {
case "1":
return "待发货";
break;
case "2":
return "已发货";
break;
case "3":
return "运输中";
break;
case "4":
return "派件中";
break;
case "5":
return "已收货";
break;
default:
return "快递信息丢失";
break;
}
},
},
};
</script>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持Devmax。