vue中filter用法

filters过滤器

filters是一个对象，在vue中的表达式如下：

filters:{
	fun1(v)
	{
	...处理逻辑
	return 返回处理后的值;
	},
	fun2(v)
	{
	...处理逻辑
	return 返回处理后的值;
	},
}

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

说明：结构是值和表达式，中间用管道符号来表示，值是通过后面的Js表达式处理后的值

{{ 值 | js表达式 }}

使用案例：
如下将字符全部转换成大写：

<template>
  <div>
    {{ fruit | fruitLoader }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      fruit: "apple",
    };
  },
  filters: {
    fruitLoader(v) {
      if (!v) {
        return "";
      }
      v = v.toString();
      return v.toUpperCase();
    },
  },
};
</script>

展示结果：APPLE

在 v-bind 中的用法：

<div v-bind:id="rawId | formatId"></div>

实例3：对一个数组进行遍历，如果数组中的数组大于10，则在后面显示“大于10”的字样，如果小于10，则在后面现在"小于10"的字样

<template>
  <div>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        {{ item | myfun1 }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [19, 2, 32, 3,11],
    };
  },
  filters: {
    myfun1(v) {
      if (v > 10) {
        return v.toString() + "大于10";
      } else {
        return v.toString() + "小于10";
      }
    },
  },
};
</script>

实例4：多个表达式处理,链式操作
过滤可以串联：
{{ message | filterA | filterB }}
逻辑说明：
message会作为第一个参数传入到filterA中，filterA返回的值会作为参数传入到filterB中，最终显示的结果就是filterB处理后的值

<template>
  <div>
    {{ a | fun1 | fun2 }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      a: 30,
    };
  },
  filters: {
    fun1(v) {
      return v + 1;
    },
    fun2(v) {
      return v + 2;
    },
  },
};
</script>

显示结果是：46

实例5：过滤器js表达式还可以接受多个参数,如下例子，a会作为第一个参数，剩余的可以设置其他多个参数

<template>
  <div>
    {{ a | fun(10, 2) }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      a: 22,
    };
  },
  filters: {
    fun(v1, v2, v3) {
      return v1 + v2 + v3;
    },
  },
};
</script>

显示结果是34