vue 过滤器常用于对 data 中的数据进行处理

局部过滤器

1. 简单使用

在组件中

<template>
  <div>
    <div>{{ money | formateSuffix("人民币") }}</div>
    <div>性别：{{ sex | formateSex }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      money: 1000,
      sex: "1",
    };
  },
  filters: {
    formateSuffix: function (v, arg) {
      return v + arg;
    },
    formateSex: function (v) {
      const obj = {
        1: "男",
        2: "女",
      };
      return obj[v];
    },
  },
};
</script>

2. 封装抽离

1. 新建 src/utils/localFilters.js，创建过滤器函数

// 按需引入

export const formateSuffix = function(v, arg)) {
  return v + arg;
};

export const formateSex = function(v) {
  const obj = {
    1: "男",
    2: "女"
  };
  return obj[v];
};

2. 在组件中，引入并使用

<template>
  <div>
    <div>{{ money | formateSuffix("人民币") }}</div>
    <div>性别：{{ sex | formateSex }}</div>
  </div>
</template>
<script>
import { formateSuffix, formateSex } from "@/utils/localFilters.js";
export default {
  data() {
    return {
      money: 1000,
      sex: "1",
    };
  },
  filters: {
    formateSuffix,
    formateSex,
  },
};
</script>

全局过滤器

1. 简单使用

1. 在组件中使用

<template>
  <div>
    <div>{{ money | formateSuffix("人民币") }}</div>
    <div>性别：{{ sex | formateSex }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      money: 1000,
      sex: "1",
    };
  },
};
</script>

2. 在 main.js 中注册

Vue.filter("formateSuffix", function(v, arg) {
  return v + arg;
});
Vue.filter("formateSex", function(v, arg) {
  const obj = {
    1: "男",
    2: "女"
  };
  return obj[v];
});

2. 封装抽离

1. 新建 src/utils/globalFilters.js，创建过滤器函数

// 全局引入

const formateSuffix = function(v, arg) {
  return v + arg;
};

const formateSex = function(v) {
  const obj = {
    1: "男",
    2: "女"
  };
  return obj[v];
};

export default {
  formateSuffix,
  formateSex
};

2. 新建 src/utils/global.js，在 install 函数中，遍历重构过滤器对象

// 引入过滤器
import filters from "./globalfilters.js";

const globals = {
  install: function(Vue, option) {
    Object.keys(filters).forEach(key => {
      // Object.keys(filters) //返回数组，数组里面的每一项是对象的属性名称
      Vue.filter(key, filters[key]);
    });
  }
};

export default globals;

3. 在 main.js 中，引入并 use

import globals from "@/utils/global.js";
Vue.use(globals);

4. 在组件中使用

<template>
  <div>
    <div>{{ money | formateSuffix("人民币") }}</div>
    <div>性别：{{ sex | formateSex }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      money: 1000,
      sex: "1",
    };
  },
};
</script>

注意

1. 过滤器可串联
2. 过滤器可传参，第一个接受的参数是 | 前 data 中的数据，第二个接受参数起才是过滤器传递的参数