サーチ…


構文

  • Vue.filter(name, function(value){}); //基本
  • Vue.filter(name, function(value, begin, end){}); //ラッピング値を持つBasic
  • Vue.filter(name, function(value, input){}); //動的
  • Vue.filter(name, { read: function(value){}, write: function(value){} }); //双方向

パラメーター

パラメータ詳細
String - フィルタの呼び出し可能な名前
[コールバック]フィルタに渡されるデータの任意の値
ベギン [コールバック]任意の値 - 渡されたデータの前に来る
終わり [コールバック]渡されたデータの後ろに来る任意の値
入力 [コールバック] Any - 動的結果のためにVueインスタンスにバインドされたユーザー入力

双方向フィルタ

two-way filter 、我々は、割り当てることができるread write単一動作をfilterの間で同じデータの値変更viewおよびmodel

//JS
Vue.filter('uppercase', {
    //read : model -> view
    read: function(value) {
        return value.toUpperCase();
    },

    //write : view -> model
    write: function(value) {
        return value.toLowerCase();
    }
});

/*
 * Base value of data: 'example string'
 *
 * In the view : 'EXAMPLE STRING'
 * In the model : 'example string'
 */

ベーシック

でカスタムフィルタVue.js単一の関数呼び出しで簡単に作成することができVue.filter

//JS
Vue.filter('reverse', function(value) {
    return value.split('').reverse().join('');
});

//HTML
<span>{{ msg | reverse }}</span> //'This is fun!' => '!nuf si sihT'

./filtersような別々のファイルにすべてのカスタムフィルタを格納することをお./filtersします。次のアプリケーションでコードを再利用するのは簡単です。このようにすれば、 JSの部分置き換える必要があります:

//JS
Vue.filter('reverse', require('./filters/reverse'));

独自のbeginラッパーとendラッパーも定義することができます。

//JS
Vue.filter('wrap', function(value, begin, end) {
    return begin + value + end;
});

//HTML
<span>{{ msg | wrap 'The' 'fox' }}</span> //'quick brown' => 'The quick brown fox'


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow