フィルタを使用してVue.jsのデータをフォーマットする

投稿日: 2022-04-20 2022-10-07
タグ: Vue.js

Angular-landのユーザーは、 filters （Angular 2+のパイプ）に精通している可能性があります。ご存知のように、バインディング値の後にパイプと関数があり、どういうわけかそれが途中でまったく異なって見えるようにする奇妙な小さな表現ですか？うん。さて、Vueにもそれらがあることがわかりました！ただし、Vueはすぐに使用できるフィルターを提供していないため、誰もがフィルターに精通しているわけではありません。

フィルタを書く

ここで、Vue.jsに独自のbooleanからstringフィルターを実装する方法を見てみましょう。

<template>
  <div>
    <!-- Is it true? It's true (or It's false). -->
    <p>Is it true? {{booleanValue | boolean(`It's true`, `It's false`)}}.</p>
    <!-- Is it true? Yes (or No). -->
    <p>Is it true? {{booleanValue | boolean}}.</p>
  </div>
</template>

<script>

// The first argument is always the passed value. After that any number of arguments may be passed.
const booleanFilter = function(value, trueText, falseText) {
  return value ? trueText || 'Yes' : falseText || 'No';
}

export default {
  filters: {
    boolean: booleanFilter
  },

  data() {
    return {
      booleanValue: false
    }
  }
}
</script>

Vue.filter（name、filterFunction）を使用して、フィルターをグローバルに登録することもできます。

import Vue from 'vue';

const booleanFilter = function(value, trueText, falseText) {
  return value ? trueText || 'Yes' : falseText || 'No';
}

Vue.filter('boolean', booleanFilter);

...

これですべてです。

フィルタは口ひげとバインディング式でのみ使用できることに注意してください（ {{thing | filter}} および：prop =“ things | filter” ）。 Angularとは異なり、v-ifまたはv-forでは使用できません。

コミュニティフィルター

プロジェクトに役立つと思われるいくつかの便利なコミュニティフィルターを次に示します。

vue2-filters-Vue1からVue2に移植された標準フィルター。
vue-moment-時間値をフォーマットするためのMoment.jsフィルター。
vue-filters-kit -いくつかの便利なフィルター、特にバイト値とパーセンテージ値を表示するためのフィルター。

getdocs

13036