Vue中的过滤器filter

一、Vue中的过滤器如何用

<!-- 1，在双花括号中 -->
{{ message | filter }}

<!-- 1，在 `v-bind` 中 由“管道”符号指示：-->
<div v-bind:msg="message | filter"></div>

// 语法：
<div id="app">
  <h3>{{userName | addName}}</h3>
</div>
<script>
// 参数一：是过滤器的名字，也就是管道符后边的处理函数；
// 参数二：处理函数，处理函数的参数同上
Vue.filter("addName",(value)=>{
    return "my name is" + value
})
let vm = new Vue({
    el:"#app",
  	data:{
     userName:"小明"
    }
})
</script>

// 参数一：是过滤器的名字，也就是管道符后边的处理函数；

// 参数二：处理函数，处理函数的参数同上

二、过滤器可以串联

{{ message | filterA | filterB }}

filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

三、过滤器是 JavaScript 函数可以接收参数

{{ message | filterA('arg1', arg2) }}

filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

四、Vue中的过滤器应用场景 

比如单位转换、数字打点、文本格式化、时间格式化之类

场景一：格式日期（时间）后端传的时间：2019-11-19T04:32:46Z 处理成 2019-11-19 12:11.00

// main.js

import moment from 'moment'
// 定义全局过滤器--时间格式化
Vue.filter('format',function(val,arg){
  if(!val) return;
  val = val.toString()
  return moment(val).format(arg)
})

// test.vue

<template>
   <div class="filter">{{time | format('YYYY-MM-DD HH:MM:SS')}}</div>
</template>

<script>
export default {
  data(){
    return {
      time:'2019-11-19T04:32:46Z'
    }
  }
}
</script>

场景二：后端返回的是数字，前端需要把数字过滤成数字对应的标识以及对应的样式

// orderData.js  数据

export default [
    {
        orderId: 1,
        name: '商品1',
        price: 20000,
        status: 1,
    },
    {
        orderId: 2,
        name: '商品2',
        price: 30000,
        status: 2,
    },
    {
        orderId: 3,
        name: '商品3',
        price: 40000,
        status: 3,
    },
    {
        orderId: 4,
        name: '商品4',
        price: 50000,
        status: 4,
    },
    {
        orderId: 5,
        name: '商品5',
        price: 6000,
        status: 5,
    }
]

// orderStatus.js filter 处里函数

export default {
  setOrderStatus(status) {// 判断数字对应的标识
    switch (status) {
      case 1:
        return '待付款';
      case 2:
        return '待发货';
      case 3:
        return '待评价';
      case 4:
        return '待收货';
      default:
        return '获取不到状态'
    }
  },
  setStatusStyle(statusString) {// 判断对应标识的class样式
    switch (statusString) {
      case '待付款':
        return 'not-pay';
      case '待发货':
        return 'not-send';
      case '待评价':
        return 'not-recrive';
      case '待收货':
        return 'not-comment';
      default:
        return 'not-defalit'
    }
  }
}

<template>
  <div class="warp">
    <table border="1">
      <tr v-for="(item, index) of orderData" :key="index">
        <td>{{ item.orderId }}</td>
        <td>{{ item.name }}</td>
        <td>￥{{ item.price }}</td>
        <td 
        :class="item.status | setOrderStatus | setStatusStyle"
        >{{ item.status | setOrderStatus }}</td> 
      </tr>
    </table>
  </div>
</template>

<script>
import orderData from "@/filters/orderData.js";   // 引入数据
import orderFilters from "@/filters/orderStatus.js";  //引入filter函数的方法

export default {
  filters:  orderFilters, // 是对象直接可以这样用
  data() {
    return {
      orderData,
    };
  },
};
</script>

<style lang="scss" scoped>
.warp {
  table {
    width: 1200px;
    margin: 10px auto;
    border-collapse: collapse;
    text-align: center;
    .not-pay {
      color: red;
    }
    .not-send {
      color: blue;
    }
    .not-receive {
      color: orange;
    }
    .not-comment {
      color: green;
    }
    .not-defalit{
      color: pink;
    }
  }
}
</style>