总所周知，vue3移除了过滤器，在vue3里可以用方法实现过滤
<template>
<div class="box" v-for="(item,index) in list" :key="index">
<span>{{item.name}}</span>
<span>{{typeFilter(item.type)}}</span>
</div>
</template>
<script lang="ts">
export default defineComponent({
// 模拟渲染数组
const list =ref<IItem[]>([
{
type:'USER',
name:'张三'
},
{
type:'USERUP',
name:'李四'
},
{
type:'ADMIN',
name:'王五'
},
])
// 需要的过滤类型
const typeList =ref<IString[]>([
{
value:'USER',
name:'企业用户'
},
{
value:'USERUP',
name:'企业管理员'
},
{
value:'ADMIN',
name:'企业超级管理员'
},
])
// 过滤-账号类型
const typeFilter = (type:string)=>{
return typeList.value.find(v=>v.value=== type)?.name||''
}
return{
typeFilter,
list
}
})
</script>
十分简单粗暴-小白都能看懂~
