Привет и добро пожаловать в этот учебник по Vue.JS с Visual Studio Code. В этой серии руководств мы увидим, как мы можем работать с Vue.JS с VS Code, и узнаем больше о Vue.JS.

Примечание. Живое демонстрационное видео внизу.

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

Сначала давайте добавим массив Items с разными данными, чтобы мы могли перебирать его и отображать данные. Как следует:

Теперь в разделе сценария мы добавим раздел фильтров точно так же, как мы добавляем любые другие разделы, такие как «методы» или «данные». внутри него мы добавим фильтр так же, как мы добавляем любую функцию в раздел метода. Начнем с фильтра заглавных букв:

Если мы посмотрим глубже на фильтр «capital», мы заметим, что мы передаем параметр «value», который представляет значение, над которым мы хотим работать. После того, как мы выполним нужную работу, мы возвращаем «значение» для его отображения.

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

<template>
<div class="filter">
<ul class="ul">
<li v-for="item in Items">
{{item.Id}} - {{item.Name | capital}} <!-- Here is the calling of filters -->
</li>
</ul>
</div>
</template>

Теперь, если мы запустим приложение, мы увидим следующий результат:

Давайте добавим еще один фильтр, чтобы заглавными были только первые буквы:

capitalFirst:function(value){
return value.charAt(0).toUpperCase() + value.slice(1)
}

И это наш результат:

Можем ли мы объединить в цепочку или использовать разные фильтры вместе? Да мы можем! давайте добавим еще один фильтр, в котором последний символ будет заглавным:

capitalLast:function(value){
return  value.substring(0,value.length - 1) + value.charAt(value.length - 1).toUpperCase()
}

И здесь мы идем:

Окончательный код компонента:

Живая демонстрация:

следите за TutorialsXL на носителе, чтобы получать обновления из нашей публикации. Спасибо, что прочитали, пожалуйста, порекомендуйте эту статью, чтобы поделиться знаниями.

Онлайн-обучение стало проще благодаря TutorialsXL.com. Присоединяйтесь сейчас и получайте отличные онлайн-курсы.

Курс разработки Windows IoT Core

https://tutorialsxl.com/courses/windows-iot-development/