文章目录

• 一.局部过滤器
• • 1.无参过滤器
  • 2.带参过滤器
• 二.全局过滤器
• 三、v-for 变相使用过滤器
• 四、串联式过滤器

过滤器：对绑定的数据以及格式进行整理

添加位置：v-bind绑定值 ，{{}}添加过滤器。 表达式的尾部以管道的方式引入 |

到现在2.x版本 过滤器都是自定义的 vue允许自定义过滤器

两种过滤器： 全局过滤器 和 局部过滤器
过滤器都需要返回值

一.局部过滤器

在当前组件内部使用

1.无参过滤器

在filters属性上自定义过滤器实现

<template>
<div id="index">
    {{msg|toUpperCase}}
    {{msg|capitalize}}
</div>
</template>
<script>
export default{
    name:"index",
    filters:{
        toUpperCase(value){
            //转化大写过滤器
            return value.toUpperCase();
        },
        capitalize(value){
            //首字母大写 其他小写
            return value.charAt(0).toUpperCase()+value.slice(1).toLowerCase(); 
        }
    },
    
    msg:'abc',

2.带参过滤器

     <input type="text" v-model="sex">
     {{stu|selecSex(sex)}}

<script>
export default{
    name:"index",
    filters:{
        selecSex(value,args){
            //性别过滤器
            let arr=[];
            value.map((item)=>{
                if(item.sex==args){
                    arr.push(item);
                }
            });
            return arr;
        }
    },
    data(){
        return{
            sex:'男',
            stu:[
                {id:1,name:'小花',sex:'女'},
                {id:2,name:'小王',sex:'男'},
                {id:3,name:'小小',sex:'女'},
                {id:4,name:'小黑',sex:'男'},
                {id:5,name:'小红',sex:'女'},
            ]
        }
    }
}
</script>

二.全局过滤器

在 main.js 中注册：

//注册全局过滤器
Vue.filter('toMoney',(value)=>{
  return value.toLocaleString();
})

    <div>{{money|toMoney}}</div>

    data(){
        return{
            money:95273124.95,
        }
    }
}

三、v-for 变相使用过滤器

v-for 循环绑定数据不能使用过滤器
可以变相使用 computed

<template>
<div id="index">
     <input type="text" v-model="sex">
     {{stu|selecSex(sex)}}
     
      <ul>
          <li v-for="(item,index) in checkSex" :key="index">
              <span>{{item.name}}</span>
          </li>
      </ul>
</div>
</template>
<script>
export default{
    name:"index",
    filters:{
        selecSex(value,args){
            //性别过滤器
            let arr=[];
            value.map((item)=>{
                if(item.sex==args){
                    arr.push(item);
                }
            });
            return arr;
        }
    },
    data(){
        return{
            sex:'男',
            stu:[
                {id:1,name:'小花',sex:'女'},
                {id:2,name:'小王',sex:'男'},
                {id:3,name:'小小',sex:'女'},
                {id:4,name:'小黑',sex:'男'},
                {id:5,name:'小红',sex:'女'},
            ],
        }
    },
    computed:{
        checkSex(){
            //变相模拟v-for上的过滤器
            let arr=[];
            this.stu.map((item)=>{
                if(item.sex==this.sex){
                    arr.push(item);
                }
            })
            return arr;
        }
    }
}
</script>
<style scoped>
</style>

四、串联式过滤器

串联式的过滤器
|** |**