Использование «фильтров», вызванных случаями Vue

Vue.js

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

Name Price
BTC $3896.23
ETH $136.64

В приведенной выше таблице нам нужно обработать отображение данных. Это то, с чем мы часто сталкиваемся.

Обычно мы будем иметь дело непосредственно с выводом данных, что можно сделать.

computed: {
    result() {
      return this.prices.map(price => "$" + price);
    }
}

Все это делается путем изменения данных.

Однако Vue предоставляет нам функцию «фильтр» форматированных данных.

Фильтры отличаются от вычислений, методов (методов), и фильтры не будут изменять данные, а просто изменят вывод пользователя. Vue удаляет встроенный «фильтр» после VUE версии 2.0. Поэтому нам нужно самим определять себя во время использования.

Далее давайте посмотрим, как использовать «фильтры» в Vue.

Первые фильтры можно использовать в двух местах: в выражениях разности {{ }} и в выражениях v-bind, а затем указывать с помощью оператора вертикальной черты "|".

Зная, где и когда, давайте посмотрим, как определить фильтры. Мы определяем его двумя способами.

локальный фильтр

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

{{price.price | currency}}

filters: {
    currency(value) {
      return "$" + value;
    }
}

глобальный фильтр

Здесь следует отметить, что при использовании глобального фильтра он должен быть перед экземпляром Vue.

Vue.filter("currency", function (value) {
  return "$" + value;
});


new Vue({
 //...
})

На данный момент мы можем с радостью использовать фильтры в наших компонентах.

Пользовательский опыт — очень важная часть, и мы можем использовать фильтры для его оптимизации. Обычно при использовании таблицы для отображения данных вы не можете гарантировать, что значение атрибута каждого поля присутствует и является разумным.

Здесь можно использовать «фильтр». Отображение необоснованных значений как «--» является наиболее распространенным методом.

filters: {
    filterPrice(value) {
      return value ? value : "--";
    }
}

параметр фильтра

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

{{ data | filterPrice(arg1, arg2) }}

Например, если мы изменим вышеуказанный случай, нам нужно не только отформатировать доллар, нам также нужно форматировать Renminbi и т. Д., Многие виды символов, то мы можем использовать метод передачи параметров.

{{price.price | filterPrice('$')}}

filters: {
    filterPrice(price, prefix) {
      return prefix + price;
    }
}

Кроме того, «фильтры» можно использовать и последовательно.

{{ data | filterA | filterB }}

При последовательном использовании результат первого фильтра передается в качестве параметра второму фильтру и так далее.

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

Если статья вас вдохновила, не забудьте поставить лайк.

Обратите внимание на мой публичный аккаунт в WeChat: Liuxiao Dengdeng, больше статей о галантерейных товарах, приглашаем к общению.

Каждый может быть мастером. Я кодер, который разбирается в технологиях и пишет сухие вещи. Связи приветствуются.

Категории