06-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 表达式, 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道(|)”符号指示：

<p>{{money | toRMB}}</p> <!--￥233.1233-->
<p v-bind:money="money | toRMB"></p>   <!--￥233.1233-->

也可以同时使用多个过滤器，但是一定要注意顺序。
这里会先将money交给toFixed过滤器处理, 然后将处理结果交给toRMB过滤器处理, 最后返回到页面.

<p v-bind:money="money | toFixed | toRMB"></p>   <!--￥233.1-->

过滤器是 JavaScript 函数，因此可以接收参数：
当过滤器需要多个参数时，过滤器的第一个参数默认为管道符左侧的原始值，其余参数依次在过滤器上传入

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

练习:

需求: 利用过滤器对时间进行格式化。
在过滤器传递参数yyyy-MM-dd时只返回 年-月-日 , 没有传递参数时返回 年-月-日 时:分:秒

<div id="app">
    <p>{{time | dateFormart("yyyy-MM-dd")}}</p>
</div>

<script>
    Vue.filter('dateFormart', function (value, fmstr) {
        let date = new Date(value);
        let year = date.getFullYear();
        let month = date.getMonth() + 1 + '';
        let day = date.getDate() + '';
        let hour = date.getHours() + '';
        let minute = date.getMinutes() + '';
        let second = date.getSeconds() + '';
        if (fmstr && fmstr === 'yyyy-MM-dd'){
            return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
        } 
        return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')} ${hour.padStart(2, '0')}:${minute.padStart(2, '0')}:${second.padStart(2, '0')}`;
    });
    new Vue({
        el: '#app',
        data: {
            time: Date.now()
        }
    });
</script>

padStart方法
padStart可以在字符串的开头进行字符补全。
语法如下：

str.padStart(targetLength [, padString])

其中：
targetLength （可选） 指目标字符串长度。

padString （可选） 表示用来补全长度的字符串。

例如：

'abc'.padStart(4, "0");     // "0abc"