vue3中已经舍弃了过滤器，因为使用计算属性也可以达到同样的效果
过滤器：主要用于一些常见的文本格式化。
可以在不改变原始数据的情况下，只是对数据进行加工处理，并且会返回过滤后的数据，再进行调用处理
使用方法：
- 在双花括号中：
{ {message | capitalize}} - 在v-bind中：
<dv v-bind:id="rawId | formatId"></div>
1、局部过滤器filters
<template>
<div class="Filterss">
<ul>
<li v-for="item in list" :key="item.id">
<span>姓名：{
{
item.name }}</span>
<span>-------</span>
<span>性别：{
{
item.sex | sexFilter }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "Filterss",
data() {
return {
list: [
{
id: 1, name: "张三", sex: 0},
{
id: 2, name: "李四", sex: 1},
{
id: 3, name: "王五", sex: 0},
{
id: 4, name: "赵六", sex: 1},
{
id: 5, name: "钱七", sex: 1},
]
}
},
//局部过滤器
filters: {
sexFilter(value) {
if (value === 0) {
return "男"
} else {
return "女"
}
}
}
}
</script>
2、全局过滤器filter
在main.js中编写代码：
Vue.filter(“过滤器的名字”，对应的过滤器函数)
Vue.filter("sexFilter", function (value) {
if (value === 0) {
return "男"
} else {
return "女"
}
})