Vuefilter() 过滤器

vue 过滤器

vue.filter() 全局过滤器

　　语法：
　　　　Vue.filter(过滤器名称,callback);
　　　　　　callback的参数：
　　　　　　参数1： 要过滤的数据
　　　　　　参数2、3、4...... : 传递的参数

　　

　　应用:
　　　　一：callback没有传递其他参数的时候
　　　　eg:
　　　　　　Vue.filter(reverseVal,(msg) => {
　　　　　　　　return msg.split('').reverse().join('')
　　　　　　})

　　　　　　应用： {{ msg | reverseVal }} 管道符

　　　　二：callback没有传递其他参数的时候
　　　　eg:
　　　　　　Vue.filter(addCode,(msg,code1,code2) => {
　　　　　　　　return '' + msg + code1 + code2;
　　　　　　})

　　　　　　应用： {{ msg | addCode }} 管道符

　　全局注册过滤器（封装成插件）

//创建一个filter.js
import Vue from 'vue';
const globalFilters = {
    addHollow : (...arg) => {
        var  argLength = arg.length;
        if(argLength == 1){
             return arg[0] + 'hollow';
        }else{
            let res = '';
            arg.forEach((val,index) => { 
                res += val;
            })
            return res;
        }
    },
    reverseVal : (val) => {
        return val.split('').reverse().join('');
    }
}
export default {
    install(Vue){
        Object.keys(globalFilters).forEach((key) => {
            Vue.filter(key,globalFilters[key]);
        })
    }
}

//在main.js中
import myFilter from './plugins/filter/filter.js';
Vue.use(myFilter);


//组件内部应用：
 {{msg | addHollow}}                     管道符
 {{val | reverseVal}}                    管道符

filters 局部过滤器

　　语法：
　　　　

　　　　filters : {
　　　　　　reverseVal(msg){
　　　　　　　　return '' + msg.split('').reverse().join('');
　　　　　　},
　　　　　　addCode(msg){
　　　　　　　　return msg + '添加的内容';
　　　　　　}
　　　　}

　　局部过滤器应用

<template>
    <div id="app">
        <img :src="imgSrc | changeSrc" alt="">
    </div>
</template>

<script>
export default {
    name:'app',
    data(){
        return {
            imgSrc : 'http://p0.meituan.net/w.h/movie/d09014103dd467babc1f6ecaf607a9511579477.jpg'
        }
    },
    filters : {
        changeSrc(src,wh){
            return src.replace(/w.h/,'170.300');
        }
    }
}
</script>