vue.js中自定义过滤器filters

目录

1. 基础语法

2. 多个过滤器串联

3. 单个过滤器接收多个参数

---

vue.js 中允许自定义过滤器，用于常见文本的格式化；

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (表达式用法从 2.1.0+ 开始支持)。

1. 基础语法

将过滤器添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<template>
    <div class='app-container'>
        <h2>{{time | timeFormat}}</h2>
        <p :class="status | styleFormat">状态<p>
    </div>
</template>

<script>
export default {
  data() {
    return {
      time: 1534502396,
      status: 1
    };
  },
  filters: {
    timeFormat(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;
    },
    styleFormat(val){
      let cls = '';
      val == 1 ? cls = 'colorRed' : cls='colorGreen';
      return cls;
  }
};
</script>

2. 多个过滤器串联

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

<template>
    <h2>{{num | formatA | formatB}}</h2>
</template>
<script>
export default {
  data() {
    return {
      num: 100
    };
  },
  filters: {
    formatA(val) {
      if (val < 60) {
        return 0.4 * val + 100;
      } else {
        return (1.25 * val + 0.4 * 60) / 3;
      }
    },
    formatB(val){
        return val.toFixed(2);
    }
  }
};
</script>

在执行过程中，会将num作为参数传入过滤器formatA，执行得到结果49.666666666666664，然后将此结果传给过滤器formatB，得到最终结果49.67 。

3. 单个过滤器接收多个参数

有的时候，我们想通过多个参数进行判断，得到我们想要的结果；此时，就可以给过滤器函数传入参数，注意，过滤器的第一个参数永远都是分割线前面的内容，我们传入的参数实际上是从第二个参数开始的。

如下示例中： 过滤器 format() 的第一个参数 t 对应的为分隔符前面的 type，而我们传入的第一个参数 dis 实际对应过滤器中的第二个参数 d ，以此类推。

<template>
    <h2 :class="type | format(discount, limit)"></h2>
</template>
<script>
export default {
  data() {
    return {
      type: 1,
      discount: 2,
      limit: 2
    };
  },
  filters: {
    format(t, d, l) {
      if (t == 1 && d == l) {
          return 'freePay'
      } else if (t == 1 && d < l) {
          return 'discountPay'
      } else {
          return 'discountRec'
      }
    }
  }
};
</script>

4. Tips：

过滤器应当用于处理简单的文本转换，如格式化日期，字母全部大写，金额每隔千位要加分隔符等；如果要实现更为复杂的数据变换，应当使用计算属性。