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

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

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

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!