Introduction to Vue filter and its use

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, which can perform various filtering processes on data and return the required results

Vue filter Basic usage

// 注册
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

##capitalizeCapitalize the first letter uppercaseAll uppercaselowercaseAll lowercasecurrencyOutput money and decimal pointpluralizeOutput plural form debounceDelayed execution functionlimitByUsed in v-for, limit the number filterBy is used in v-for to select dataorderBy is used in v-for to sort

Name	Function

Custom filter

Use 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;
  }
 });

Use in the form

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

Related recommendations ：

Detailed explanation of the filter attribute of CSS3

Detailed introduction to the filter function in JavaScript

Instance analysis of Filter in JavaWeb Servlet

The above is the detailed content of Introduction to Vue filter and its use. For more information, please follow other related articles on the PHP Chinese website!