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]));