vue过滤器的使用 filters

使用

当我们没有设置过滤器的时候我们的代码是这样的

         <el-table-column label="日志类型">
            <template slot-scope="scope">
              <span v-if="scope.row.logType==1">登录退出</span>
              <span v-if="scope.row.logType==2">管理员管理</span>
              <span v-if="scope.row.logType==3">角色管理</span>
              <span v-if="scope.row.logType==4">口令及密码管理</span>
              <span v-if="scope.row.logType==5">用户管理</span>
            </template>
          </el-table-column>

有了过滤器我们的代码是这样的

		<el-table-column label="日志类型">
            <template slot-scope="scope">
              <span>{{scope.row.logType | logTypeFilter}}</span>
            </template>
          </el-table-column>

可见如果页面有很多这种格式的数据，使用文件过滤器还是很好用的

官网介绍

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

{{ message | capitalize }}

过滤器文件的引用与创建

引入
在app.js中引入

require('./modules/filter');  //这个文件放到models文件夹里了，以实际放的为主

filters文件

/**
 * Created by xz on 2020/5/20.
 */
"use strict";

import Vue from 'vue';

function Filter(){};

Filter.logTypeFilter = (val) => {
  let map = {
    "1": "登录退出",
    "2": "管理员管理",
    "3": "角色管理",
    "4": "口令及密码管理",
    "5": "用户管理"
  };
  return map[val] ? map[val] : "";
};

Object.entries(Filter).forEach(item => Vue.filter(item[0], item[1]));