Detailed explanation of Vue filter usage

This article mainly introduces the introduction of Vue filter and its detailed usage. VueJs provides a powerful filter API that can perform various filtering processes on data. Let’s follow the editor to take a look, I hope it can help everyone.

VueJs provides a powerful filter API that can perform various filtering processes on data and return the required results

Basic usage of Vue filters

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

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

or

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

Default filter

Note: Using the default filter has been deprecated in Vue 2.0 version

##NameFunctioncapitalizeFirst letter is capitalizeduppercaseAll capslowercaseAll lowercasecurrencyOutput money and decimal point##pluralizedebouncelimitByfilterByorderBy

Output plural form
Delayed execution function
in v Used in -for, limit the number
Used in v-for, select data
Used in v-for, sorting

Custom filter

Use a global definition of a filter

 //过滤非法字符
 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;
  }
 });

Have you learned how to use

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

in the form? Collect it if you find it useful.

Related recommendations:

Detailed explanation of Ajax request and Filter cooperation case

Detailed explanation of CSS3 filter attribute

Detailed introduction to filter function in JavaScript

The above is the detailed content of Detailed explanation of Vue filter usage. For more information, please follow other related articles on the PHP Chinese website!