美文网首页
4.Vue之自定义过滤器

4.Vue之自定义过滤器

作者: 悟空你又瘦了 | 来源:发表于2017-06-14 10:53 被阅读0次

介绍

类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数。过滤器函数以值为参数,返回转换后的值

正文

1.系统过滤器

json lowercase uppercase filterBy 注意点:在Vue2.0中已经将系统过滤器给移除了

 {{ msg | json  }}-json格式
 {{ msg | lowercase }} -小写
 {{ msg | uppercase }}-大写
 filterBy -管道  见前面品牌管理案例-过滤器

2.自定义过滤器

  • 私有过滤器 :定义在 VM中的filters对象中的所有过滤器都是私有过滤器
    私有过滤器的弊端是:在多个VM中不能共享,会造成代码的冗余,将来维护成本高
<body>  
    <div id="app">
        {{ time | datefmt}}
    </div>
<script>
new Vue({
    el:'#app',
    data:{
        time:new Date()
    },
    filters:{
        //定义在 VM中的filters对象中的所有过滤器都是私有过滤器
        datefmt:function(input,str,s1){
            var date = new Date(input); 
            var year = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            //输出: yyyy-mm-dd
            var fmtStr = year+'-'+m +'-'+d;
            return fmtStr; //输出结果
        }
    }
});
  • 全局过滤器
    <div id="app">
        {{ time | datefmt }}
    </div>
<script>
//1.0 定义全局过滤器
Vue.filter('datefmt',function(input){
    var date = new Date(input); 
    var year = date.getFullYear();
    var m = date.getMonth() + 1;
    var d = date.getDate();
    //输出: yyyy-mm-dd
    var fmtStr = year+'-'+m +'-'+d;
    return fmtStr; //输出结果
});
new Vue({
    el:'#app',
    data:{
        time:new Date()
    }   
});
它接收两个参数:过滤器 ID 和过滤器函数
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>
Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})
过滤器函数可以接收任意数量的参数:
参数要引号
<!-- 'hello' => 'before hello after' -->
<span v-text="message | wrap 'before' 'after'"></span>
Vue.filter('wrap', function (value, begin, end) {
  return begin + value + end
})

vue2.0详细

相关文章

网友评论

      本文标题:4.Vue之自定义过滤器

      本文链接:https://www.haomeiwen.com/subject/kyrsqxtx.html