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或{{}}里使用，通过管道符(|)来连接

<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-->