VUE过滤器 基础回顾5

过滤器是一种在模板中处理数据的便捷方式，特别适合对字符串和数组进行简易显示

    <div id="app">
      <p>商品1花费{{oneCost | fromatCost}}</p>
      <p>商品2花费{{towCost | fromatCost}}</p>
      <p>商品3花费{{treCost | fromatCost}}</p>
    </div>
    <script>
      new Vue({
        el:'#app',
        data:{
          oneCost:998,
          towCost:9981,
          treCost:9982,
        },
        filters:{
          fromatCost(vlue){
            return "￥" + (vlue/100).toFixed(2);
          }
        }
      })
    </script>

　　上述代码简化了代码，重复度也很少，更加易读，可维护性也更好，同时达到了从分到元，保留两位小数，同时新增￥。

　　还可以进行链式操作。如果有一个round过滤器，可以四舍五入  {{treCost |  round | fromatCost }} 使用此种方式可以同时使用两个过滤器，首先会调用round过滤器，然后将值传入fromatConst 进行处理，然后输出到页面

　　除了在插值中使用，还可以在v-bind中使用过滤器   v-bind:value = "oneCost | fromatCost"  

　　也可以在使用Vue.filter() 来注册一个全局的过滤器，让整个应用都可以用到。可以将过滤器放到单独的filters.js文件中

　　
　　注意事项:

　　　　1.过滤器是组件中唯一不能使用this来访问数据或方法的地方。因为过滤器应该是纯函数，同样的输入，每次都返回同样的输出，而不涉及任何外部数据。想要访问外部数据因该将其作为参数传入；

　　　　2.只可以在插值和v-bind指令中使用过滤器，在vue1中可以在任何地方使用表达式的地方使用，在vue2中取消了这样的做法