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

Logo

前往低代码交流专区

更多推荐