База
Подобно пользовательской директиве, пользовательский фильтр может быть зарегистрирован с помощью Global Method Vue.filter (), который принимает два параметра: идентификатор фильтра и функция фильтра. Функция фильтра принимает значение в качестве параметра и возвращает конвертированное значение:
Vue.filter ('reverse', function (value) {return value.split (''). React (). Join ('')})<!-'abc' => 'cba'-> <span v-text = "Сообщение | Reverse"> </span>
Функция фильтра может получить любое количество параметров:
Vue.filter ('wrap', function (значение, начало, конец) {return begin + value + end})<!-'hello' => 'перед Hello After'-> <span v-text = "Сообщение | wrap 'до' 'после'"> </span>
Двунаправленный фильтр
В настоящее время мы используем фильтры для преобразования значения из модели, прежде чем отображать его в представлении. Тем не менее, также можно определить фильтр, который преобразует значение из представления (<Input> элемент), прежде чем записать его обратно в модель:
Vue.filter ('currencydisplay', {// model -> view // Форматирование значения перед обновлением `<pint>` element read: function (val) {return '$' +val.tofixed (2)}, // view -> model // Форматирование значения перед написанием данных. isnan (номер)?Динамические параметры
Если параметр фильтра не обернут в кавычки, он будет динамически рассчитываться в текущей масштабах виртуальной машины. Кроме того, эта функция фильтра всегда указывает на виртуальную машину, которая ее вызывает. Например:
<input v-model = "userInput"> <pan> {{msg | CONCAT USERINPUT}} </span> Vue.filter ('concat', function (value, input) {// `input` ===` this.userinput` возвращаемое значение + input})Приведенный выше пример относительно прост, и вы также можете использовать выражения для достижения того же результата, но для более сложной логики требуется более одного оператора, и вам необходимо поместить его в вычисленное свойство или пользовательский фильтр.
Встроенные фильтры Filterby и Orderby Filter/Sort входящие массивы на основе текущего состояния экземпляра Vue, которому он принадлежит.
Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Для обучения по компонентам Vue.js, пожалуйста, нажмите на учебник по обучению компонентов Special Topic.js.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.