Фильтры

Локальные и глобальные фильтры

Последнее обновление: 21.10.2017

Фильтры позволяют отформатировать текст определенным образом перед его выводом на веб-страницу, то есть осуществляют предобработку значений.

Фильтры могут быть глобальными, то есть использоваться для любого компонента в приложении. И также фильтры могут быть локальными, то есть определенными только для одного компонента.

Глобальные фильтры

Для определения глобального фильтра во Vue.js вызывается метод Vue.filter, который имет следующий формальный синтаксис:

Vue.filter(название_фильтра, function (oldValue) { 
    // преобразование из oldValue в newValue
	return newValue 
})

Первый параметр представляет название фильтра. Второй параметр - функция, которая в качестве параметра принимает обрабатываемое значение. В самой функции некоторый образом обрабатывается это значение, из него создается новое значение, которое затем возвращается в качестве результата.

После определения фильтра его можно применить для форматирования какого-либо определенного значения. Это можно сделать в выражении интерполяции:

{message | filter}

Или в выражениях атрибута v-bind:

v-bind="message | filter"

Также можно принять фильтр

Например, создадим фильтр, который будет делать первую букву заглавной:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app"> 
  {{message | capitalize }}
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.filter('capitalize', function (value) { 
          var capitalFirst = value.charAt(0).toUpperCase() 
          var noCaseTail = value.slice(1, value.length) 
            return capitalFirst + noCaseTail;
});
new Vue({
	el:'#app',
	data: { 
		message: "hello word!"
	}
})
</script>
</body>
</html>

В данном случае фильтр называется capitalize. Функция в фильтре вырезает первую букву переданного слова, делает ее заглавной и соединяет с остальной частью слова.

Для применения фильтра после определенного значения ставится прямая вертикальная черта, после которой идет название фильтра:

{{message | capitalize }}

Локальные фильтры

Локальные фильтры определяются в компоненте через свойство filters:

<!DOCTYPE html>
<html>
<head>
<title>Фильтры Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app"> 
  <h2>{{header | uppercase }}</h2>
  <message></message>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('message', {
	template: '<h2>{{text | uppercase}}</h2>',
	data: function(){
		return {
			text: 'vue filters'
		}
	},
	filters: {
		uppercase(value) { 
			return value.toUpperCase();
		}
	}
});
new Vue({
	el:'#app',
	data: { 
		header: "hello word!"
	}
})
</script>
</body>
</html>

Здесь компонент message имеет параметр filters, который представляет объект. В этом объекте фильтры определяются в виде функцию, которые возвращают отформатированное значение. В данном случае определен только один фильтр uppercase, который просто возвращает строку с символами в верхнем регистре. И внутри компонента мы можем применять данный фильтр. Однако вне компонента мы не можем его применить, так как фильтр локальный. И в частности, применение фильтра в следующей строке:

<h2>{{header | uppercase }}</h2>

работать не будет. И браузер в консоли выведет нам предупреждение, хотя ошибки в этом случае также не будет.

Фильтры во Vue.js

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850