Vue filter的介绍及使用

冷不防 2022-06-16 22:54 195阅读 0赞

# Vue filter介绍及其使用 #

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

## 目录 ##

*  Vue filter介绍及其使用
    
     *  目录
        
         *  Vue 过滤器的基本用法
         *  默认的过滤器
         *  自定义过滤器

--------------------

![这里写图片描述][SouthEast]

### Vue 过滤器的基本用法 ###

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

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

或

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

### 默认的过滤器 ###

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

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

### 自定义过滤器 ###

使用全局定义一个过滤器

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

在表单中使用

[SouthEast]: /images/20220617/bcdf8ee4579f4729be093d7b3f8dd3ae.png