Vueフィルターの使い方

// フィルターを使用する場合は、区切りとしてパイプ記号 ( | ) を追加する必要があります。フィルター名は、テキストの機能であるパイプ記号 | の右側にあります。
<!-- 二重中括弧内 -->
{{ メッセージ | フィルター名}}
​
<!-- `v-bind` 内 -->
<div v-bind:id="id | フィルター名"></div>

Vue.filter('filter name', function(val) { // val は処理されるデータを表します // フィルタービジネスロジック、戻り値が必要です})
​
<div>{{ メッセージ | フィルター名}}</div>
<div v-bind="msg | フィルター名"></div>

データ （） {
    戻る {
        メッセージ: 'こんにちは世界'
    }
},
//プライベートローカルフィルターを定義します。フィルターは現在のvueオブジェクトでのみ使用できます: {
    dataFormat: (msg, a) => { // msg はフィルタリングされるデータを表し、a は入力パラメータを表します return msg + a;
    }
}
​
<p>{{ msg | dataFormat('!')}}</p> // 結果: hello world!

// filter/index.js ファイルエクスポートデフォルト {
    日付形式: 値 => {
        const dt = 新しい日付(値 * 1000)
    
        定数 y = dt.getFullYear()
        const m = (dt.getMonth() + 1 + '').padStart(2, '0') // .padStart(指定された桁数、"埋める符号または値")
        定数 d = (dt.getDay() + '').padStart(2, '0')
        
        定数 hh = (dt.getHours() + '').padStart(2, '0')
        定数mm = (dt.getMinutes() + '').padStart(2, '0')
        定数ss = (dt.getSeconds() + '').padStart(2, '0')
        
        `${y}-${m}-${d} ${hh}:${mm}:${ss}` を返します
    }
}
​
// .vue ファイルでローカル フィルターを使用する <script>
    '../filter' からフィルターをインポートします
​
    エクスポートデフォルト{
        …… 
        フィルター: { ...フィルター },
        データ（） {
            戻る {}
        }
    }
</スクリプト>
​
<div> 日付: {{ date | dateFormat }} </div>

// constants/dictionary.js ファイル​
エクスポートconst GENDER_MENU = [
    { コード: 0、ラベル: '男性'},
    { コード: 1、ラベル: '女性'}
];
​
エクスポートconst COMMON_MENU = [
    { コード: 0、ラベル: 'いいえ'},
    { コード: 1、ラベル: 'はい'}
];
​
エクスポートデフォルト{
    性別メニュー、共通メニュー
}

// filter/dict.js ファイル​
'../constants/dictionary' から Dict をインポートします
​
エクスポートconstgenderMenu = {
    関数: 値 => {
        const ターゲット = Dict.GENDER_MENU.filter(item => {
            戻り値 item.code = value;
        })
        target.length ? target[0].label : value を返します。
    }
}
​
エクスポートconst commonMenu = {
    関数: 値 => {
        const ターゲット = Dict.COMMON_MENU.filter(item => {
            戻り値 item.code = value;
        })
        target.length ? target[0].label : value を返します。
    }
}

// filter/index.js ファイル​
import * as filters from './dict' // フィルター関数をインポートする​
const インストール = Vue => {
    // インポートされたフィルターはオブジェクトです。Object.keys() メソッドを使用してキーの配列を取得します。データを反復処理し、キーをグローバル フィルターの名前として使用します。キーの後には対応する処理関数が続きます。このようにして、グローバル フィルターを任意のコンポーネントで使用できます。Object.keys(filters).forEach(key => {
        Vue.filter(キー、フィルター[キー].func)
    })
    /*
    for(const _filter in フィルター) {
        Vue.filter(`${_filter}`, フィルター[_filter].func)
    } */
}
​
デフォルトのエクスポート インストール

// main.js ファイル​
……
'./../filter/index' からフィルターをインポートします
Vue.use(フィルター)
……

// .vue ファイルでグローバル フィルターを使用する
<p>性別: {{ gender | genderMenu }}</p>