Как сделать фильтр vue js
Добавил пользователь Alex Обновлено: 04.10.2024
Vue.js — это библиотека JavaScript, которая помогает создавать веб-приложения с использованием архитектурного шаблона MVVM (Model-View-ViewModel) . На первый взгляд, он может показаться очень похожим на AngularJS , но как только вы начнете работать с ним, вы быстро поймете, что Vue.js не только намного проще и проще в освоении, но и более гибким.
В этом вводном руководстве я познакомлю вас с основными понятиями Vue.js и предоставлю полный обзор его наиболее важных функций.
Vue.js 1.0.x имеет несколько синтаксических изменений, которые не совместимы с Vue.js 0.12.x. Если у вас есть опыт использования этих ранних версий, возможно, вы уже заметили некоторые изменения в этом руководстве. Вы можете получить обзор всех изменений здесь: Что нового в Vue.js 1.0
Добавление Vue.js на вашу страницу
Хотя вы можете получить последний выпуск Vue.js от GitHub , вам может быть проще загрузить его из CDN:
Создание View-Model
В Vue.js view-модели создаются с использованием класса Vue . Если вам интересно, что такое модель представления, вы можете думать о ней как об объекте, который позволяет очень просто отображать данные вашей модели внутри представления (вы можете рассматривать любой литерал объекта как модель и любой элемент HTML UI). как мнение).
Чтобы увидеть, как работает модель представления, давайте начнем с создания представления. Пустой div > пока подойдет:
И вот объектный литерал, который будет нашей моделью. Поскольку он работает с кодом JavaScript, убедитесь, что вы создали его внутри script > или в отдельном файле JS.
Теперь, когда у нас есть представление и модель, пришло время создать модель представления (экземпляр Vue ), которая связывает их вместе:
Как видите, свойство el указывает на представление (здесь можно использовать любой селектор CSS), а свойство data указывает на модель. Наша модель просмотра теперь готова к использованию.
Чтобы отобразить данные вашей модели в представлении, вы должны использовать привязки в стиле усов. Например, чтобы отобразить свойство age вашей модели, вы должны добавить строку < < age >> внутри вашего представления. В следующем фрагменте кода используются оба свойства модели:
Любые изменения, сделанные вами в вашей модели, будут сразу же видны в представлении.
Создание двусторонних привязок
Привязка в стиле усов, которую мы использовали в предыдущем примере, является односторонней. Это означает, что он может только показывать данные модели, но не изменять их. Если вы хотите разрешить представлению редактировать модель, вы должны вместо этого создать двустороннюю привязку, используя директиву v - model .
Давайте изменим наше представление так, чтобы оно содержало input элемент, v - model указывает на свойство name :
На этом этапе, если вы измените значение в поле ввода, ваша модель изменится немедленно.
Использование фильтров
Фильтр — это функция, которую вы можете использовать внутри директивы или привязки в стиле усов. Фильтру всегда предшествует символ канала ( | ). Например, если вы хотите отобразить свойство name в верхнем регистре, ваша привязка в стиле усов будет выглядеть так:
Также в этом случае есть демо для фильтров, которые вы можете проверить:
Фильтры lowercase и lowercase capitalize могут использоваться аналогичным образом.
Мы поговорим подробнее о фильтрах в следующем разделе.
Рендеринг массивов
Если ваша модель имеет массив, вы можете отобразить содержимое этого массива, добавив директиву v - for в элемент li > списка. Чтобы продемонстрировать это, давайте добавим массив к нашей модели:
Следующий код показывает, как отобразить свойство name каждого объекта в массиве friends :
Чтобы изменить порядок, в котором перечислены элементы, используйте фильтр orderBy внутри директивы v - for . Например, если вы хотите упорядочить элементы по age , ваш код должен выглядеть следующим образом:
Эта третья демонстрация использует двустороннюю привязку данных и фильтр filterBy для имитации поиска:
Обработка событий
В Vue.js, если вам нужно обрабатывать события, связанные с вашим представлением, вы должны добавить обработчики событий в свойстве methods модели представления. Внутри всех обработчиков событий Vue.js вы можете использовать this для доступа к элементам в модели данных.
Следующая модель представления содержит обработчик щелчка:
Чтобы связать обработчик событий, определенный в модели представления, с одним или несколькими элементами пользовательского интерфейса в представлении, вы должны использовать директиву v - on . Например, в следующем представлении есть button > которая использует директиву v - on для вызова myClickHandler :
Соединение этих фрагментов приводит к демонстрации обработчика кликов :
Создание компонентов
Vue.js позволяет создавать собственные элементы HTML, которые можно использовать в ваших представлениях. Используя такие элементы, вы можете сделать свой код не только более кратким, но и более читабельным.
Чтобы определить и зарегистрировать пользовательский элемент HTML, необходимо создать компонент Vue, используя метод component класса Vue . Вы можете указать содержимое пользовательского элемента, используя свойство template компонента.
Вот фрагмент кода, который определяет и регистрирует простой пользовательский элемент HTML с именем sitepoint > .
Элемент sitepoint > теперь можно использовать внутри вашего представления, как и любой другой стандартный элемент HTML.
Стандартные элементы HTML обычно имеют связанные с ними атрибуты, которые позволяют контролировать их внешний вид и поведение. Пользовательские элементы, которые вы создаете с помощью Vue.js, тоже могут иметь такие атрибуты. Чтобы указать, какие атрибуты может иметь ваш элемент, вы должны использовать свойство props при создании связанного компонента.
Вот как бы вы добавили опору с названием channel в элемент sitepoint > :
Как видно из кода выше, привязки в стиле усов могут использоваться для встраивания значения реквизита в template .
Теперь вы можете использовать атрибут channel внутри sitepoint > . Например, вот как вы можете использовать его для ссылки на два разных канала Sitepoint:
Не стесняйтесь изменять код в следующей демонстрации, чтобы поэкспериментировать с другими шаблонами и реквизитом.
и данное поле ввода также не обновляется.
Вы решили свою проблему? Оно работает? Если да, отметьте ответ как действительный, чтобы пометить его как решенный и сохранить S.O. в чистоте. Если нет, попробуйте обновить вопрос, и мы постараемся вам помочь.
Ответы 2
Вы можете использовать:
Для глобальных фильтров сначала установите:
Редактировать:
Присмотревшись к своему коду, вы не используете filter в качестве фильтра Vue и вызываете только из одной точки (метода) вместо вызова встроенного из HTML, возможно, лучше, чтобы сам метод возвращал значение ввода, например:
Это сработало? Или проявляется такая же ошибка? Если да, можете ли вы вставить ошибку?
Да, работает. Но значение не отображается внутри элемента ввода [я использую "return a" для отражения обновленного значения]
И я тоже пробовал "var a = this. $ options.filters.moneyFormat (значение); this. $ emit ('ввод', a)"
Я сделал. Если я скажу вот так: "this.row.charges = this. $ options.filter.moneyFormat (значение)", он снова выдаст ту же ошибку.
Я попробовал функцию ur "displayValue" вместо функции фильтра, но снова произошло то же самое, и появилась ошибка "Заявление о незаконном возврате"
@sovalina, я твои пробовала. Он работает нормально, но не форматирует значение динамически добавляемых строк. Как получить доступ к той же функции для динамически добавляемых строк
Попробуйте добавить возврат для else . Если это не сработает, можете ли вы поделиться console.log() возврата?
Как уже было сказано, если вы хотите использовать фильтр, вам нужно сделать this.$options.filters.moneyFormat(value)
и используйте эти данные для выполнения ваших входных данных:
Другие вопросы по теме
Как сделать Vue Filter рекурсивным?
У меня была функция, которую мне нужно было использовать в разных компонентах, поэтому я решил сделать Vue Filter. Проблема в том, что функция рекурсивная, это сам вызов, но я не знаю, как это сделать в Vue Filter. Фактически, я решил проблему, но я…
Фильтр Vue и "Не изменять состояние хранилища Vuex вне обработчиков мутаций"
Я все еще изучаю Vue и не могу понять, почему возникает эта ошибка. Ошибка: [vuex] Не изменяйте состояние хранилища vuex вне обработчиков мутаций. Вот мой код: const DATE_FORMAT = "DD-MM-YYYY"; Vue.filter("formatDate", function(value, dateFormat) < …
Как использовать вычисляемую функцию для фильтрации?
У меня есть сомнения по поводу небольшого проекта, который я разрабатываю, я не хочу использовать пользовательские фильтры, я просто хочу использовать вычисляемые фильтры для вывода реверса простого текста, который я определил в моих данных, в тот м…
Найти и заменить все совпадения в строке
VueJS добавить класс, если есть фильтр
Есть ли способ сделать это правило фильтра в VueJS? Если какой-то элемент имеет фильтр discount, родитель получит класс color-green (в этом случае тэг span) Я сделал JSFIDDLE:) HTML <div > <h3>50% Discount =)</h3> <ul>…
Как сделать фильтры нечувствительными к регистру в Vuejs/Javascript
Я пытаюсь создать приложение в Vuejs 2 где у меня есть фильтр, чтобы узнать конкретные данные из массива элементов. Этот фильтр case sensitive но я хочу иметь case insensitiveследующий мой код: tableFilter: function () < if( this.model ) < return th…
Что может быть причиной того, что VueJS Filter возвращает предупреждение - это не функция?
У меня есть простой глобальный фильтр filter.js: import Vue from 'vue'; import myService from '../../services'; Vue.filter('translate', function (message, . args) < return myService.getString(message, . args); >); В шаблоне MyComponent.vue: <di…
Vue фильтрует переход от vue 1 к vue 2
Vue-фильтр не работает с V-HTML
У этой проблемы мало решений, но у меня ничего не получалось. Я использую пакет под названием vue-filter и я хочу использовать nl2br фильтр. Когда я пытаюсь использовать его в моем HTML, как это <p style="padding: 10px;font-size: 17px;" v-html row q-info">
Использование нескольких фильтров в директиве v-for в Vue 2.0
Просто следуя учебному пособию о фильтре Vue в директиве v-for в Vue 1.x, автор использовал несколько фильтров в одном v-for директива, например <ul v-for="post in posts | filterBy nameFilter in 'name' | filterBy catFilter in 'cat'"></ul>…
Скрыть элементы карты в Vue
У меня есть маленький вопрос о том, как сделать что-то подобное: у меня есть 2 компонента (один для боковой панели и один для моих карт (Bootstrap Cards)). Компонент карт отображается в foreach Цикл прямо из базы данных. Есть 3 атрибута: title, desc…
Отфильтровать повторяющиеся данные в Vue
Как отфильтровать повторяющиеся теги в списке, чтобы в списке был только один тег? Вот мой код компонента: <template> <v-layout row wrap> <ul> <li v-for="post in sortByName(posts)" :key="post.key"> <v-chip v-for row q-info">
Используйте фильтр внутри v-for
У меня есть простой фильтр Vue, который ограничивает длину массива до n элементов. Работает нормально, вот так: << array | limitArray(2) >> Теперь я хотел бы использовать его внутри v-for цикл, как это: <li v-for="item in items | limitArray(3)"&g…
Динамически применять фильтр поиска к данным JS, используя Vuejs
У меня есть список массивов, который содержит имена столбцов. Я хочу написать поисковый фильтр, который будет динамически выбирать значение из массива и отображать все строки и столбцы. Фильтр поиска должен быть с массивом, содержащим имена столбцов…
Рендеринг нескольких фильтров на столе в Vue Js
Я пытаюсь построить таблицу фильтров в Vuejs который фильтрует таблицу в соответствии с требованием, у меня есть два отдельных поля ввода, которые фильтруют одну общую таблицу, мой код таблицы примерно так: <div > <div class…
Фильтры vue.js в v-for
Мне было интересно об использовании фильтров в VUE Я знаю, вычислил, и когда я использую его, но мой вопрос я использовал этот код для сортировки фруктов вместо массива <li v-for="fruit in fruits.sort() ">< Попытка отфильтровать данные по имени клиента. Перепробовал много вариантов без удачи. в настоящее время у меня есть список клиентов, разделенных на отдельный компонент с намерением использовать vuex, поскольку проект становится больше. Таким образо… У меня есть vue filter и отобразить некоторые значения. Я хотел бы изменить значение, когда последняя цифра значения находится между 2 и 4. Мне нужно иметь автоматизированный код, чтобы он работал для всех возможных интервалов, например: (22-24, 32-… Vue.js - это JavaScript библиотека, которая помогает разрабатывать приложения используя архитектурный паттерн MVVM (Model-View-ViewModel). На первый взгляд он может показаться очень похожей на AngularJS, но как только начинаешь работать с Vue.js, понимаешь, что он не только намного проще, а ещё и более гибкий. В этой статье я покажу вам основную концепцию Vue.js, а также дам полный обзор наиболее важным особенностей этой замечательной библиотеки. В Vue.js 1.0 есть несколько изменений в синтаксисе, которые не совместимы с версией 0.12.x. Если у вас уже есть опыт использования более ранних версий библиотеки, то возможно вы заметите изменения в этой статье. За более полным списком изменений можно обратиться к статье: Что нового в Vue.js 1.0. В Vue.js View-Model'и создаются с помощью класса Vue. Вы можете думать о View-Model'ях как об объектах, которые упрощают отображение данных вашей модели в представлении (вы можете соотнести любой объект в качестве модели и любой HTML элемент в качестве представления). Чтобы увидеть как работает View-Model, давайте создадим представление. Для этого разместим на странице пустой Теперь нужно создать объект модели. Так как это JavaScript объект, поместите его внутри тега Фильтр - это функция, которую вы можете использовать в своих токенах. Перед фильтром всегда ставится символ pipe ( вертикальная черта | ). Например если вы хотите, чтобы ваше имя отображалось в верхнем регистре, то ваш токен будет выглядеть следующим образом: Ниже пример фильтра в действии: Фильтры lowercase и capitalize могут быть использованы аналогичным способом. Больше о фильтрах мы будем говорить в следующем разделе. Если в свойствах вашей модели есть массивы, то вы можете вывести их содержимое используя директиву v-for, добавив её например к элементу списка. Для демонстрации, давайте добавим в нашу модель массив: Следующий код показывает как вывести свойство name у каждого объекта в массиве friends: Для того чтобы изменить порядок вывода элементов в списке, используйте фильтр orderBy внутри директивы v-for. Например, если вы хотите отсортировать элементы по свойству age, то это будет выглядеть так: Так же вы можете указать условия вывода элементов. Для этого используйте фильтр filterBy. В следующем примере показано как вывести только те элементы, которые содержат символ "а" в свойстве age. А вот пример того как можно с помощью filterBy сделать простой поиск: В Vue.js, если вам нужно обрабатывать события связанные с вашим представлением, вам нужно добавить обработчики событий внутри свойства methods вашей View-Model. Внутри всех обработчиков событий Vue.js, вы можете использовать ключевое слово this, для доступа к данным вашей модели. Следующая View-Model содержит обработчик клика: Для того чтобы связать обработчик события, который определён во View-Model, с одним или несколькими элементами пользовательского интерфейса в представлении, нужно использовать директиву v-on. В следующем примере, у нас есть представление с элементом , которая использует директиву v-on, чтобы вызвать обработчик myClickHandler: Если соединить всё вышесказанное вместе, то мы получим следующее: Vue.js позволяет создавать свои пользовательские HTML элементы, которые могут быть использованы в ваших представлениях. С помощью таких элементов, вы можете сделать ваш код не только более кратким, но и более удобным для чтения. Для того, чтобы определить и зарегистрировать пользовательский HTML-элемент, нужно воспользоваться методом component класса Vue. Вы указать содержимое вашего элемента, используя свойство template. Пример кода, который определяет и регистрирует простой HTML элемент с именем . Теперь элемент может быть использован в вашем представлении, также как и любой другой HTML элемент. У стандартных HTML-элементов обычно есть атрибуты, которые позволяют контролировать то, как элемент будет выглядеть и как он будет вести себя. У пользовательских элементов, которые создаются с помощью Vue.js, тоже могут быть такие атрибуты. Чтобы указать атрибуты для нового элемента, нужно заполнить свойство props при его объявлении. Вот так, например, мы сможем передавать тег в наш элемент : Как вы можете увидеть из кода выше, токены с двумя фигурными скобками, могут использоваться внутри свойства template. Теперь мы можем использовать атрибут tag внутри элемента . Например, вот так можно вывести ссылки на два разных тега:Фильтр Vue.js 2 не работает с таблицей данных
Требуется фильтр Vue с веб-пакетом Laravel
Изменение отображаемого значения в зависимости от второй цифры номера
Подключаем Vue.js на страницу
Создание View-Model
Фильтры
Рендеринг массивов
Обработка событий
Создание компонентов
Читайте также: