Vue之过滤器filter

在官方文档中，是这样说明的：可被用于一些常见的文本格式化，vue中过滤器的作用可被用于一些常见的文本格式化。（也就是修饰文本，但是文本内容不会改变）

过滤器分两种： 全局过滤器、局部过滤器
全局过滤器使用频率还是非常高的。
两个小例子：1、给金额前加“￥”符号，2、设备状态用文字展示。用三种方式分别来实现。

一、不使用过滤器：

<template>
  <div class="filter">
    <el-card>
      <div>
        <!-- 不使用过滤器 -->
        <p>1、￥{{ price }}</p>
        <p>2、设备状态：{{ deviceStatusFun(status) }}</p>
        <br />
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      price: 200,
      status: "unline"
    };
  },
  methods: {
    // function
    deviceStatusFun(value) {
      const STATUS = {
        online: "在线",
        sell: "出售",
        unline: "离线",
        stop: "停售"
      };
      return STATUS[value];
    }
  }
};
</script>

结果如下图：

####二、局部过滤器
过滤器可以用在两个地方：双花括号插值 或 v-bind表达式。
看一个小例子：

<template>
  <div class="filter">
    <el-card>
      <div>
        <!-- 局部过滤器 -->
        <p>3、{{ price | addPriceIcon }}</p>

        <p>4、设备状态：{{ status | deviceStatus }}</p>
        <br />
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      price: 200,
      status: "unline"
    };
  },
  filters: {
    addPriceIcon(value) {
      return `￥${value}`;
    },
    deviceStatus(value) {
      const STATUS = {
        online: "在线",
        sell: "出售",
        unline: "离线",
        stop: "停售"
      };
      return STATUS[value];
    }
  },
};
</script>

结果如下图：

以上代码，我的需求是想把价格前面加上人民币符号（¥），模板中文本后边需要添加管道符号（ | ）作为分隔，管道符 | 后边是文本的处理函数，处理函数的第一个参数是：管道符前边的——文本内容，如果处理函数上边传递参数，则从第二个参数依次往后是传递的参数。

三、全局过滤器

全局过滤器使用：Vue.filter( filterName，( )=>{ return // 数据处理结果 } )

在实际开发中，全局过滤器经常会被在数据（比如时间、日期的装饰）上边，通常我们会把处理函数给抽离出去，统一放在一个.js文件中(/utils/filters.js)

// filters.js
// 全局过滤函数
export function filter_price(val) {
  return "¥" + val;
}
export function filter_device_status(val) {
  const STATUS = { online: "在线", sell: "出售", unline: "离线", stop: "停售" };
  return STATUS[val];
}

然后在main.js中引入filters.js，当然，也可以在使用的具体页面上引入filters.js。
但是对于全局过滤器来说，最好是在main.js中定义，规范些，导入的是一个对象，所以使用Object.keys（）方法，得到一个由key组成的数组，遍历数据，让key作为全局过滤器的名字，后边的是key对应的处理函数，这样在任何一个组件中都可以使用全局过滤器了：

// main.js
// 引入全局过滤函数
import * as _filter from "@/utils/filters";

console.log("fil--", _filter);

Object.keys(_filter).forEach(item => {
  Vue.filter(item, _filter[item]);
});

在组件中使用全局过滤器：
直接调用：filter_price 、 filter_device_status

<template>
  <div class="filter">
    <el-card>
      <div>
        <!-- 全局过滤器 -->
        <p>5、{{ price | filter_price }}</p>
        <p>6、设备状态：{{ status | filter_device_status }}</p>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      price: 200,
      status: "unline"
    };
  },
};
</script>

结果如下图：