当前位置:Gxlcms > JavaScript > Vue filter介绍及其使用详解

Vue filter介绍及其使用详解

时间:2021-07-01 10:21:17 帮助过:72人阅读

VueJs 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果

Vue 过滤器的基本用法

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

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

默认的过滤器

注意:在Vue 2.0版本中已经废弃使用默认过滤器

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

自定义过滤器

使用全局定义一个过滤器

  1. //过滤非法字符
  2. Vue.filter('validate', function(val) {
  3. val = val.toString();
  4. reg = /[`~!@#$%^&*()_+<>?:"{},\/;']/im;
  5. if(reg.test(val)) {
  6. $.alert("请勿输入非法字符", "温馨提示");
  7. //返回时删除非法字符
  8. return val.substr(0, val.length - 1);
  9. } else {
  10. //原内容返回
  11. return val;
  12. }
  13. });

在表单中使用

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

人气教程排行