vue----filter过滤器

1.全局过滤器-------------可在所有的组件中进行使用

如果有数据需要过滤，就在该组件中使用过滤器 
 
全局过滤器
参1：过滤器名称(函数名)
参2：过滤器实现的函数(数据处理函数)
 
使用的方式：通过管道符使用  |
 
import Vue from "vue";
 
Vue.filter("过滤器名称",("参1"，"参2")=>{
    参1：需要处理的数据，即 管道符 | 前的数据
    参2：传递的参数
    
 //return的值直接取代管道符 | 前的值
})

 

2.局部过滤器-----------------只可在当前组件中进行使用

 

<template>
    <div class="details">
        <div class="con">
            <p>名称：{{name}}</p>
// 使用过滤器，vue会直接把 要处理的数据 放入过滤器的第一个参数位，即sum函数中有一个实参price ---------->sum(price)，但是price不能写，写上的第一个参数相当于传递的第二个实参----------->传递给数据处理函数的第二个形参
////过滤器含参数传递时，第一个参数会放入数据处理函数的第二个参数位，如果有其他参数依次类推
            <p>单价：{{price | sum()}}</p>
            <p>数量：{{num}}</p>
            <p>总价：{{price * num}}</p>
 
            <hr>
            <p>反转后：{{message | res()}}</p>
 
 
            <p>{{message2 | re()}}</p>
        </div>
    </div>
</template>
 
export default{ 
 filters:{
        //key为过滤器的名称
        //value为过滤器实现的函数，

  　　　　//参1:val  为管道 | 前面的值

   　　　　 //参2：传递的参数

        "sum":(val,sign)=>{
            if(sign){
                return sign + val
            }else{
                return "heng" + val
            }
        }
 
}

 

 

全局过滤器案例

 

<script>
import Vue from "vue";
 
//过滤金币符号
Vue.filter("sum",(val,sign)=>{
    //参1:val  为管道 | 前面的值
    //参2：传递的参数
    if(sign){
        //如果传了参：
        return sign + val;
    }else{
        //如果没有传参：
        return "1111111" + val;
    }
    //返回的值直接取代管道符 | 前的值
})
-------------------------------------------------------------------- 
 
//文字逆序
Vue.filter("res",(val)=>{
    return val.split("").reverse().join("");
})
------------------------------------------------------------ 
//匹配替换
Vue.filter("re",(val)=>{
    if(/这/g.test(val)){
        return val.replace(/这/g,"猪");
    }
})
---------------------------------------------------------------- 
//时间过滤器
Vue.filter("time",()=>{
    var data = new　Date();
    var Y = data.getFullYear();
    var m = data.getMonth() + 1;
    var d = data.getDate();
    var h = data.getHours();
    var minu = data.getMinutes();
    var s = data.getSeconds();
    if(m < 10) {
        m = '0' + m;
    }
    if(d < 10) {
        d = '0' + d;
    }
    if(h < 10) {
        h = '0' + H;
    }
    if(minu < 10) {
        minu = '0' + i;
    }
    if(s < 10) {
        s = '0' + s;
    }
    var t = Y + '-' + m + '-' + d;
    return t; //年月日
 
})

局部过滤器案例

export default {
    data(){
        return{
            message:"王磊",
            message2:"这这这这话"
        }
    },
    props:["name","price","num"],
    //局部过滤器
    filters:{
        //key为过滤器的名称
        //value为过滤器实现的函数
        "sum":(val,sign)=>{
            if(sign){
                return sign + val
            }else{
                return "heng" + val
            }
        }
 
 
    }
 
}
</script>

后端给字符串，前端进行过滤