封装常用的过滤器

关键词：vue 过滤器

vue2.0已经发布了，虽不说像angular2那样变化巨大，却增删了不少东西，其中在1.0中自带的过滤器全部被删掉了，只留下一个自定义过滤器的接口，没办法，要用过滤器只能自己封装了，这时候考验我们js水平的时候到了，果然还是我大js靠谱！

我们先引入一个vue地址
* <script src="D:/sublime/lib/vue/vue.js"></script>
接着写一段HTML测试

    <div id="box">
        <ul>
            <li>{{b | currency("$" ,2) }}</li>  // 注意参数写法，包在括号里
            <li>{{a | lowercase}}</li>
            <li>{{c | capitalize}}</li>
        </ul>
    </div>

自定义过滤器

        var vm = new Vue({
        el:"#box",
        data:{
            a:"AAA",
            b:"33008",
            c : "readme"
        },
    });


    Vue.filter('uppercase', function(value) {
      if (!value) { return ''}
      value = value.toString()
      return value.toUpperCase();
    });

    Vue.filter('lowercase', function(value) {
      if (!value) { return ''}
      value = value.toString()
      return value.toLowerCase();
    });

    Vue.filter('capitalize', function(value) {
      if (!value) { return ''}
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1);
    });

    Vue.filter('currency',function(val,i,n){
        var num = parseFloat(val).toFixed(n || 2);
        var re = /(\d{1,3})(?=(\d{3})+(?:\.))/g;
        var s = (i || "$") + num.replace(re, "$1,");
        // console.log(s);
        return s;
    })

以上我们定义的是全局过滤器，我们也可以在实例中定义局部过滤器

      var myVue = new Vue({
        el: ".test",
        data: {
          message:12
        },
        filters: {
          discount: function (discount) {
            return disconut* 0.7;
          }
        }
      });