MyTetra Share
Делитесь знаниями!
Фильтры в Vue
24.02.2018
19:09
Автор: br0ke
Текстовые метки: javascript, js, vue, vuejs, vue.js, filter, filters
Раздел: Информационные технологии - JavaScript - Vue

Vue позволяет использовать фильтры (filters), которые влияют на отображение, при этом не изменяя сами данные. Фильтры могут использоваться в двух местах:

  1. строковые интерполяции {{ }};
  2. выражения v-bind.


<!-- in mustaches -->
{{ message | capitalize }}

<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>


Фильтр является функцией и получает значение, находящееся перед символом пайпа (|), как аргумент value.

Фильтры можно комбинировать (соединять в цепочки один за другим).


Определение фильтров: глобальное и локальное:

================================


Локальное:

filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}


Глобальное (до создание корневого экземпляра Vue):

Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
// ...
})


Использование дополнительных аргументов в фильтрах:

=====================================


{{ message | filterA('arg1', arg2) }}


В данном примере переменная message будет передана в фильтр первым аргументом, а строки 'arg1' и 'arg2' как второй и третий аргумент соответственно.

Так же в этом разделе:
 
MyTetra Share v.0.52
Яндекс индекс цитирования