全局过滤器 - 实现字符串反转

1
2
3
4
5
6
import Vue from "vue";

Vue.filter("aaa", function (val) {
  console.log(val);
  return val.split("").reverse().join("");
});

局部过滤器 - 实现字符串反转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div>
    {{ text | aaa }}
  </div>
</template>

<script>
 export default {
  name: "App",
  data() {
    return {
      text: "memeda!",
    };
  },
  // 局部过滤器
  filters: {
    aaa: function(val) {
      return val
        .split("")
        .reverse()
        .join("");
    },
  },
};
</script>
  • 过滤器用于进行文本内容格式化处理，全局过滤器可以再任意 Vue 实例中使用。比如对一些时间进行指定方式的格式化。

语法：

  • Vue.filter(“过滤器名称”, 执行函数);
1
2
3
4
Vue.filter("过滤器名称", function (value) {
  // 逻辑代码
  return "处理结果";
});

使用：

  • 过滤器可以在元素内容中使用插值表达式，并将过滤器与插值表达式结合进行内容处理。
  • 也可以在属性绑定指令中 v-bind 中使用，对绑定的内容进行过滤处理。
  • 不论是在插值表达式中使用，还是在 v-bind 中使用，都需要通过管道符 | 连接数据。
1
2
3
4
5
6
<div id="app">
  // 在 v-bind 中使用，管道符前面是需要过滤的数据 后面是过滤器名称
	<div v-bind:id="id | filterId"></div>
	// 在 插值表达式 中使用
	<div>{{ content | filterContent }}</div>
</div>

注意：

  • 在 Vue 中，可以将一个数据传入到多个过滤器中进行处理。
1
2
3
4
<div id="app">
	// 在 插值表达式 中使用
	<div>{{ content | filterA | filterB }}</div>
</div>
  • 一个过滤器可以传入多个参数。
1
2
3
4
<div id="app">
	// 在 插值表达式 中使用 content是第一个参数，par1是第二个参数，par2是第二个参数。
	<div>{{ content | filterContent(par1, par2) }}</div>
</div>

局部过滤器

  • 局部过滤器只能在当前 Vue 实例中使用。

语法：

  • 局部过滤器也可以将一个数据同时传入到多个过滤器中处理，一个过滤器中也可以同时接受多个参数。
1
2
3
4
5
6
7
8
9
10
11
12
13
new Vue({
  // ...
  filters: {
    过滤器名称1: function (value, arg2) {
      // 逻辑代码
      return "处理结果";
    },
    过滤器名称2: function (value, arg2) {
      // 逻辑代码
      return "处理结果";
    },
  },
});