Vue.js
Пользовательские фильтры
Поиск…
Синтаксис
-
Vue.filter(name, function(value){});
// Basic -
Vue.filter(name, function(value, begin, end){});
// Основные с обертывающими значениями -
Vue.filter(name, function(value, input){});
// Динамические -
Vue.filter(name, { read: function(value){}, write: function(value){} });
// Двусторонний
параметры
параметр | подробности |
---|---|
название | Строка - требуемое имя вызываемого имени фильтра |
значение | [Обратный вызов] Любое значение данных, передаваемых в фильтр |
начать | [Обратный звонок] Любое - значение, которое необходимо перед переданными данными |
конец | [Обратный вызов] Любое - значение, которое следует после переданных данных |
вход | [Обратный вызов] Любой пользовательский вход, связанный с экземпляром 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
как тогда легко повторить использование своего кода в следующем приложении. Если вы пойдете так, вам придется заменить часть 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