Vue-filter指令全局过滤和稀有过滤

简单介绍一下过滤器，顾名思义，过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。例如，从['abc','abd','ade']数组中取得包含‘ab’的值，那么可通过过滤器筛选出来‘abc’和‘abd’；把‘Hello’变成‘Hello World’，那么可用过滤器给值‘Hello’后面添加上‘ World’；或者把时间节点改为时间戳等等都可以使用过滤器。

 

 

全局过滤器：

Vue.filter('globalFilter', function (value) {

  return value + "!!!"

})

<body>
    <div  class="box">
        <!-- | 代表管道，过滤器语法  后面msopt是过滤器的名字 -->
        <p>{{ ms | msopt('疯狂')}}</p>
    </div>
 

<script>


    // 标准函数
        // var a=function (args){
            // alert("hello word");
        // };
        // 箭头函数
        // var a=()=>{
        //     alert("hello word");
        // };


// 全局过滤 filter  第一个参数是必须的，第一个参数就是{{ms |msopt}}"|"前面的
// 定义一个全局的过滤器 filter名字叫做msopt
//这里面回调函数 function(){return dd.replace()} 简写成了箭头函数
// 而且  <p>{{ ms | msopt('疯狂'')}}</p> 我们需要自己来出传递这个参数
// 我们知道filter 里面的回调函数 第一个参数是写死的，我们只能用第二个
    Vue.filter('msopt', (dd,arg)=>{
        return dd.replace('/单纯/g',arg);
        // /单纯/g  正则表达式 g 是全局搜索
    })

    var vm=new Vue({
        el:'.box',
        data:{
            ms:'单纯的我，就喜欢单纯的问问,你单纯吗？'
        },
       methods: {
           
       },
    })
</script>

 

 

 私有过滤器（filters）

 

 <tbody>
        <tr>
            <td>{{ jj | appmeg("不上班") }}</td>
        </tr>
    </tbody>
</table>

    
    
<script>
    
var vm=new Vue({
    el:'.table',
    data:{
        jj:'今天星期六'

    },
    methods:{

    },
    //定义自定义(私有)的过滤器
    // filters:{
    //     // appmeg 私有过滤器的名字  a  是必须参数 代表要过滤的字符串
    //      如果存在私有和全局过滤器，采用就近原则先用私有的过滤器
    //     appmeg:function(a){
    //         return a+'sdfsdfsdf';

    //     }

    // }
    

        // 带有参数的自定义filter
    filters:{
        // appmeg 私有过滤器的名字  a  是必须参数 代表要过滤的字符串
        appmeg:function(a,b){
            return a+'sdfsdfsdf'+b;

        }

    }
    
    
});
</script>

 

 

 

 

posted @ 2019-09-25 15:23  WhiteSpace  阅读(933)  评论(0)  编辑  收藏  举报