vue中過濾器filters的使用

過濾器主要是對數據進行過濾處理，對原始數據進行篩選后再進行展示。

主要用在兩個地方：

雙花括號插值

{{ message | handleData }}

v-bind表達式

<div v-bind:id="message | handleData"></div>

過濾器的格式

局部過濾器的默認格式為：

filters: {
	handleData: function (value) {
		if(value>=60)     return '及格'
		else   		  return '不及格'
	}
}

全局過濾器的默認格式為(在main.js添加，並不常用):

Vue.filter('handleData', function(value) {
		if(value>=60)   return '及格'
		else   	        return '不及格'
})
new Vue({
	...
})

當全局過濾器與局部過濾器，會采用局部過濾器

過濾器串聯

{{ message | filterA | filterB }}

執行順序為：

1.執行filterA過濾器，將表達式message的值作為參數傳入filterA中

2.執行filterB過濾器，將filterA處理后的返回值作為參數傳入filterB中

3.得到的返回值就是過濾后的最終結果。

過濾器接收多個參數

{{ message | filterA('a','b')}}

這里filter接受了三個參數，表達式message的值，字符串'a'，字符串'b'。當然也可以接受更多的參數，只需在filterA()中添加即可

具體實例

<template>
  <div class="app-container">
    <div class="the-container">
      <el-table
        ref="table"
        v-adaptive="{bottomOffset: 85}"
        :data="tableData"
        height="50px"
      >
        <el-table-column
          prop="date"
          label="日期"
          show-overflow-tooltip
        />
        <el-table-column
          prop="name"
          label="姓名"
          show-overflow-tooltip
        />
        <el-table-column
          label="地址"
          show-overflow-tooltip
        >
          <div slot-scope="{ row }">
            <div>
              {{ row.address }}
            </div>
          </div>
        </el-table-column>
        <el-table-column
          prop="nation"
          label="民族"
          show-overflow-tooltip
        >
          <div slot-scope="{ row }">
            <div>
              {{ row.nation |nation }}
            </div>
          </div>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  filters: {
    nation: (value) => {
      let nation = ''
      switch (value) {
        case 1:
          nation = '漢族'
          break
        case 2:
          nation = '滿族'
          break
        case 3:
          nation = '潑水族'
          break
        case 4:
          nation = '藏族'
          break
        default:
          break
      }
      return nation
    }
  },
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王虎',
        address: '上海市普陀區金沙江路 1518 弄',
        nation: 1
      }, {
        date: '2016-05-04',
        name: '小虎',
        address: '上海市普陀區金沙江路 1517 弄',
        nation: 2
      }, {
        date: '2016-05-01',
        name: '王小',
        address: '上海市普陀區金沙江路 1519 弄',
        nation: 3
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1516 弄',
        nation: 4
      }]
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
  .app-container{
    height: 100%;
    background-color: #f1f1f1;
  }
  .the-container{
    height: 100%;
    padding: 20px;
    background-color: #fff;
  }
</style>

箭頭函數

例子中用箭頭函數取代普通的函數，因為箭頭函數表達式的語法比函數表達式更簡潔，並且沒有自己的this，arguments，super或new.target。箭頭函數表達式更適用於那些本來需要匿名函數的地方，並且它不能用作構造函數。

基本的語法

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
//相當於：(param1, param2, …, paramN) =>{ return expression; }

// 當只有一個參數時，圓括號是可選的：
(singleParam) => { statements }
singleParam => { statements }

// 沒有參數的函數應該寫成一對圓括號。
() => { statements }

想要了解箭頭函數的其他用法可以參考箭頭函數的文檔：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions