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