關鍵詞：vue 過濾器

vue2.0已經(jīng)發(fā)布了，雖不說像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>  // 注意參數(shù)寫法，包在括號里
            <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;
          }
        }
      });