vue之自定义过滤器(六)

一、过滤器介绍:
1、在Vue中会通过过滤器（Filters）来渲染数据，使视图可读性更加优雅。
2、Vue中的过滤器不能替代Vue中的methods、computed或者watch，但有时候功能却是可以达到相同的效果
3、过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本
4、过滤器可以保持API响应的干净，并在前端处理数据的格式。
5、可以有效地封装成可重用代码块背后的所有逻辑。
6、在Vue 2.0中已经没有内置的过滤器了，我们可以自定义过滤器。
二、过滤器分类：
全局过滤器：
Vue.filter(“过滤器名称”,callback)
局部过滤器：
filters:{"过滤器名称":callback}
三、过滤器的使用场景：
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (表达式用法从 2.1.0+ 开始支持)。
<1>基础语法：
将过滤器添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<template>
    <div class='container'>
        <h2>{{time | format}}</h2>
        <p :class="code | colorformat">状态<p>
    </div>
</template>
 
<script>
export default {
  data() {
    return {
      time: 1534502396,
      code: 1
    };
  },
  filters: {
    format(val) {
      let date = new Date(val * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      m = m >= 10 ? m : "0" + m;
      d = d >= 10 ? d : "0" + d;
      return y + "-" + m + "-" + d;
    },
    colorformat(val){
      let cls = '';
      val == 1 ? cls = 'red' : cls='green';
      return cls;
  }
};

<2>多个过滤器串联
多个过滤器串联时，会将前一个过滤器的结果作为参数传给下一个过滤器。

<template>
    <h2>{{num | resolveA | resolveB}}</h2>
</template>
<script>
export default {
  data() {
    return {
      num: 50
    };
  },
  filters: {
    resolveA(val) {
      if (val < 30) {
        return 0.4 * val + 50;
      } else {
        return (1.25 * val + 0.4 * 30) / 3;
      }
    },
    resolveB(val){
        return val.toFixed(2);
    }
  }
};
</script>

<3>双向过滤器
目前我们使用过滤器都是在把来自模型的值显示在视图之前转换它。不过也可以定义一个过滤器，在把来自视图（<input> 元素）的值写回模型之前转化它：

Vue.filter('currency', {
  // model -> view
  // 在更新 `<input>` 元素之前格式化值
  read: function(val) {
    return '$'+val.toFixed(2)
  },
  // view -> model
  // 在写回数据之前格式化值
  write: function(val, oldVal) {
    var number = +val.replace(/[^\d.]/g, '')
    return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
  }
})

如果感觉有帮助，可以关注和点赞！！！