vue中过滤器的使用

vue过滤器的作用：

 在不改变原数据的前提下，对数据进行一定程度的处理，在返回并显示在页面上

过滤器的定义和使用

// 全局注册
Vue.filter('toRMB', function (value) {
  return `￥${value}`
})
 
new Vue({
  el: '#app',
  data: {
    money: 223.1233,
  },
 
  // 局部注册
  filters: {
    toRMB: function(money) {
      return  `￥${money}`
    },
    toFixed:function(money) {
      return  money.toFixed(1)
    },
  },
)}
 
// 注意:全局过滤器要写在vue实例前

过滤器可以在v-bind或{undefined{}}  （插值）里使用，通过管道符(|)来连接

<p v-bind="money | toRMB"></p>   <!--￥233.1233-->
<p>{{money | toRMB}}</p> <!--￥233.1233-->
 
<!--也可以同时使用多个过滤器，但是一定要注意顺序-->
<p v-bind="money | toFixed | toRMB"></p>   <!--￥233.1-->
 

当过滤器需要多个参数时，过滤器的第一个参数默认为管道符左侧的原始值，其余参数依次在过滤器上传入

Vue.filter('toDate', function (value,month,day) {
  return value + '-' + month + '-' + day
})
 
new Vue({
  data:{
     year:2019
  }
})

<p>{{year | toDate('04','22')}}</p>  <!--2019-04-22-->

filter：内容格式化，将输入的数据，按照某种规则进行输出，从这一层讲，感觉叫 formatter 可能更合适；

method：数据、交互等的逻辑处理，相对 formatter 的功能更纯粹，一般结合“数据驱动”的理念，尽量不直接操作 DOM；

directive：DOM 处理中心，拥有相对完整的生命周期，用于控制数据的流转，一般的 DOM 处理等内容都集中到此

vue 对数据提供一个 filter 的处理器，用以在不改变data 的情况下 输出前端需要的数据格式。对值进行筛选加工。