Introduction au filtre Vue et à son utilisation

Cet article présente principalement l'introduction du filtre Vue et son utilisation détaillée. VueJs fournit une puissante API de filtre qui peut effectuer divers processus de filtrage sur les données. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

VueJs fournit une API de filtre puissante, qui peut effectuer divers processus de filtrage sur les données et renvoyer les résultats requis

Utilisation de base du filtre Vue

// 注册
Vue.filter('my-filter', function (value) {
 // 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

//在mustache中使用
{{ msg | uppercase }}

ou

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

Filtre par défaut

Remarque : il est obsolète dans la version Vue 2.0 Filtre par défaut

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

Filtre personnalisé

Utiliser globalement Définir un filtre

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

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

à utiliser dans le formulaire

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

Recommandations associées :

Explication détaillée de l'attribut de filtre de CSS3

Introduction détaillée à la fonction de filtre en JavaScript

Exemple d'analyse de filtre dans JavaWeb Servlet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!