Heim >Web-Frontend >js-Tutorial >Einführung in den Vue-Filter und seine Verwendung

Einführung in den Vue-Filter und seine Verwendung

小云云
小云云Original
2018-05-30 14:37:342240Durchsuche

In diesem Artikel wird hauptsächlich die Einführung des Vue-Filters und seine detaillierte Verwendung vorgestellt. VueJs bietet eine leistungsstarke Filter-API, die verschiedene Filterprozesse für Daten durchführen kann. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

VueJs bietet eine leistungsstarke Filter-API, die verschiedene Filterprozesse für Daten durchführen und die erforderlichen Ergebnisse zurückgeben kann

Grundlegende Verwendung des Vue-Filters

// 注册
Vue.filter('my-filter', function (value) {
 // 返回处理后的值
})
// getter,返回已注册的过滤器
var myFilter = Vue.filter('my-filter')
//在mustache中使用
{{ msg | uppercase }}

oder

//在标签中使用
<input type="password" v-model="psw | validate">

Standardfilter

Hinweis: In der Version Vue 2.0 ist der Standardfilter

名称 功能
capitalize 首字母大写
uppercase 全部大写
lowercase 全部小写
currency 输出金钱以及小数点
pluralize 输出复数的形式
debounce 延期执行函数
limitBy 在 v-for 中使用,限制数量
filterBy 在 v-for 中使用,选择数据
orderBy 在 v-for 中使用,排序

Benutzerdefinierter Filter

Global verwenden Definieren Sie einen Filter

 //过滤非法字符
 Vue.filter(&#39;validate&#39;, function(val) {
  val = val.toString();
  reg = /[`~!@#$%^&*()_+<>?:"{},\/;&#39;]/im;

  if(reg.test(val)) {
   $.alert("请勿输入非法字符", "温馨提示");
   //返回时删除非法字符
   return val.substr(0, val.length - 1);
  } else {
   //原内容返回
   return val;
  }
 });
zur Verwendung im Formular

<input type="password" placeholder="输入密码" v-model="psw | validate" maxlength = "18">
Verwandte Empfehlungen:


Detaillierte Erläuterung des Filterattributs von CSS3

Detaillierte Einführung in die Filterfunktion in JavaScript

Beispielanalyse des Filters im JavaWeb Servlet

Das obige ist der detaillierte Inhalt vonEinführung in den Vue-Filter und seine Verwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn