Vue.js
カスタムフィルタ
サーチ…
構文
-
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