哪里使用Vue串聯(lián)過濾器

發(fā)布時間：2020-07-29 12:24:54 來源：億速云閱讀：133 作者：小豬欄目：web開發(fā)

這篇文章主要講解了哪里使用Vue串聯(lián)過濾器，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

平時開發(fā)中，需要用到過濾器的地方有很多，比如單位轉(zhuǎn)換、數(shù)字打點、文本格式化等，比如：

Vue.filter('toThousandFilter', function (value) {
 if (!value) return ''
 value = value.toString()
 return .replace(str.indexOf('.') > -1 &#63; /(\d)(&#63;=(\d{3})+\.)/g : /(\d)(&#63;=(&#63;:\d{3})+$)/g, '$1,')
})

實現(xiàn)效果：

30000 => 30,000

當(dāng)然這只是常規(guī)用法，沒什么好說的。下面來說一個我在開發(fā)中遇到的一個需要用到串聯(lián)過濾器的使用場景。

假設(shè)需要獲取一個訂單列表，其中的每一項的 status 字段用來表示訂單狀態(tài)：

 {
      id: '',
      order_num: '123456789',
      goodList: [ ... ],
      address: { ... },
      status: 1 // 1 待付款 2 待發(fā)貨 3 待收貨
     }

那我們拿到這個數(shù)據(jù)在，v-for 的時候，肯定會這樣做：

 <template>
  <!-- ... -->
  <span class="order_status">{{ orderItem.status | getOrderStatus }}</span>
  <!-- ... -->
</template>
<script>
 export default {
  // ...
  filters: {
    getOrderStatus(status) {
      switch (status.toString()) {
        case '1':
          return '待付款';
        case '1':
          return '待發(fā)貨';
        case '1':
          return '待收貨';
        default:
          return '';
      }
    }
  }
  // ...
 }
</script>
<style scoped type="scss">
  // ...
  .order_status {
    font-size: 14px;
  }
  // ...
</style>

這樣，表示狀態(tài)的 1， 2， 3 就變成了待付款，待發(fā)貨，待收貨。這沒有什么問題。但是，需求來了，當(dāng)訂單未付款時，表示狀態(tài)的文字應(yīng)該為紅色。就是當(dāng)狀態(tài)為待付款時，文字要為紅色！這個問題曾經(jīng)困擾了有一段時間，用了各種辦法，雖然也是實現(xiàn)了需求，但終歸不太優(yōu)雅。直到最近在翻看 vue 文檔，才想起來有串聯(lián)過濾器的用法，可以完美解決這個需求，上碼：

<template>
  <!-- ... -->
  <span class="order_status" :class="orderItem.status | getOrderStatus | getOrderStatusClass">{{ orderItem.status | getOrderStatus }}</span>
  <!-- ... -->
</template>
<script>
 export default {
  // ...
  filters: {
    getOrderStatus(status) {
      switch (status.toString()) {
        case '1':
          return '待付款';
        case '1':
          return '待發(fā)貨';
        case '1':
          return '待收貨';
        default:
          return '';
      }
    },
    getOrderStatusClass(status) {
      if (status === '待付款') {
        return 'not-pay'
      }
      return ''
    }
  }
  // ...
 }
</script>
<style scoped type="scss">
  // ...
  .order_status {
    font-size: 14px;
    &.not-pay {
      color: red;
    }
  }
  // ...
</style>

就這么簡單。

關(guān)于過濾器，這里還有幾點要注意的：

過濾器必須是個純函數(shù)
過濾器中拿不到 vue 實例，這是 vue 故意這么做的
在全局注冊過濾器是用 Vue.filter()，局部則是 filters: {}
在方法中調(diào)用過濾器方法為： this.$options.filters.XXX

看完上述內(nèi)容，是不是對哪里使用Vue串聯(lián)過濾器有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

哪里使用Vue串聯(lián)過濾器

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽