vue过滤器 Vue.filter() filters

　作用：过滤数据

 

    语法：

        全局：

            Vue.filter("过滤器名",(参数一,参数二)=>{});

                参数一：需要过滤的数据

                参数二：传递的数据

 

        局部：

            filters:{

                过滤器名(){

 

                }

            }

    

    使用：{{username|过滤器名()}}

全局过滤器：

1、定义过滤器（npm i moment）

import moment from 'moment'
Vue.filter('format',(value, formatter) => {
  return moment(value).format(formatter)
})

2、使用过滤器

  data() {
    return { time: new Date().getTime() }
  }

    <p>格式化时间：{{time|format('YYYY-MM-DD')}}</p>

 

局部过滤器：

1、定义过滤器

  filters: {
    imgReplace(data, wh) {
      return data.replace(/w\.h/, wh) // 将字符串 "w.h" 替换为 "170.280"
    },
    currency: (value) => `￥${value.toFixed(2)}元`
  }

2、使用过滤器

  data() {
    return {
      imgUrl:
        'http://p0.meituan.net/w.h/movie/2c24eb6a84a92b9ba837967851bec9462844109.jpg',
      price: 100
    }
  }

    <img :src="imgUrl|imgReplace('170.280')" alt="">
    <p>货币：{{price|currency}}</p>

效果：

 

 

使用过滤器做数据优化：

1、mock数据：（src/data/order.js）

export default [
  // 1 待付款  2 待发货 3 待收货 4 待评价
  {
    orderId: 1,
    name: '商品1',
    price: 100,
    status: 1
  },
  {
    orderId: 2,
    name: '商品2',
    price: 500,
    status: 2
  },
  {
    orderId: 3,
    name: '商品3',
    price: 700,
    status: 3
  },
  {
    orderId: 4,
    name: '商品4',
    price: 1000,
    status: 4
  }
]

2、定义处理数据过滤器和处理样式过滤器（src/filters/order.js）

export default {
  setOrderStatus(value) {
    // 1 -> 待付款  2 -> 待发货 3 -> 待收货 4 -> 待评价
    switch (value) {
      case 1:
        return '待付款'
      case 2:
        return '待发货'
      case 3:
        return '待收货'
      case 4:
        return '待评价'
      default:
        return '未获取到状态'
    }
  },
  setStatusStyle(value) {
    switch (value) {
      case '待付款':
        return 'not-pay'
      case '待发货':
        return 'not-send'
      case '待收货':
        return 'not-receive'
      case '待评价':
        return 'not-comment'
      default:
        return ''
    }
  }
}

3、使用过滤器

<template>
  <div id="app">
    <table border="1">
      <tr v-for="(item, index) in 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 './data/order'
import orderFilter from './filters/order'
export default {
  data() {
    return { orderData }
  },
  filters: orderFilter
}
</script>
<style lang="less" scoped>
table {
  width: 800px;
  margin: 50px auto;
  border-collapse: collapse;
  text-align: center;
}
.not-pay {
  color: red;
}
.not-send {
  color: blue;
}
.not-receive {
  color: orange;
}
.not-comment {
  color: green;
}
</style>

 

 

过滤器的作用和computed类似，都是做数据优化的，数据优化也可以在methods中获取到数据时进行优化处理，具体使用哪一种方法看情况。