Vueタンデムフィルタの使用シーンを詳しく説明します。

普段の開発では、フィルタを使うところがたくさんあります。たとえば、単位転換、数字打点、テキストフォーマットなどです。

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

実現効果:
30000=>30,000
もちろんこれは一般的な使い方です。何も言いません。以下では、開発中に出会った直列フィルタの使用シーンを紹介します。
注文リストを取得する必要があると仮定すると、各項目のstatusフィールドは注文状態を表します。        

 {
      id: '',
      order_num: '123456789',
      goodList: [ ... ],
      address: { ... },
      status: 1 // 1     2     3    
     }

このデータを手に入れたら、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 '   ';
        case '1':
          return '   ';
        default:
          return '';
      }
    }
  }
  // ...
 }
</script>
<style scoped type="scss">
  // ...
  .order_status {
    font-size: 14px;
  }
  // ...
</style>

このように状態を表す1，2，3は前払となり、出荷待ちとなります。これは大丈夫です。しかし、注文が来ました。未払いの場合、状態を表す文字は赤色であるべきです。支払い待ちの状態で文字が赤色になります。この問題はもう悩んでいます。いろいろな方法を使って、需要を実現しましたが、結局はあまり優雅ではありませんでした。最近までvue文書を見ていて、直列フィルタの使い方を思い出しました。この要求を完璧に解決できます。

<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 '   ';
        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>

こんなに簡単です。
フィルターについては、ここで注意すべき点があります。

フィルタは、純粋な関数

でなければなりません。

フィルタの中でvueのインスタンスが得られません。これはvueが意図的に作った

です。

グローバルにフィルタを登録するのはVue.filter（）で、局部はfilters:{}

です。

方法でフィルタを呼び出す方法は、this.$options.filters.XXX

ここで、Vueタンデムフィルタの使用シーンを詳しく説明する文章を紹介します。Vueタンデムフィルタの内容については、以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。