vue过滤器用法实例分析

2019-11-19 11:59:20

字体：大中小

来源：转载

供稿：网友

本文实例讲述了vue过滤器用法。分享给大家供大家参考，具体如下：

过滤器:

vue提供过滤器:

capitalize uppercase currency....

<div id="box">    {{msg|currency ￥}}  </div>

debounce 配合事件，延迟执行

<div id="box">    <input type="text" @keyup="show | debounce 2000">  </div>

数据配合使用过滤器:

limitBy 限制几个
limitBy 参数(取几个)
limitBy 取几个从哪开始

<div id="box">    <ul>      <!--取2个-->      <li v-for="val in arr | limitBy 2">        {{val}}      </li>      <br/>      <br/>      <!--取2个，从第arr.length-2个开始取-->      <li v-for="val in arr | limitBy 2 arr.length-2">        {{val}}      </li>    </ul>  </div>  <script>    var vm=new Vue({      data:{        arr:[1,2,3,4,5]      },      methods:{      }    }).$mount('#box');  </script>

filterBy 过滤数据
filterBy '谁'

<div id="box">    <input type="text" v-model="a">    <ul>      <li v-for="val in arr | filterBy a">        {{val}}      </li>    </ul>  </div>  <script>    var vm=new Vue({      data:{        arr:['width','height','background','orange'],        a:''      },      methods:{      }    }).$mount('#box');  </script>

orderBy 排序

orderBy 谁 1/-1
1 -> 正序
2 -> 倒序

<div id="box">    <input type="text" v-model="a">    <ul>      <li v-for="val in arr | orderBy -1">        {{val}}      </li>    </ul>  </div>  <script>    var vm=new Vue({      data:{        arr:['width','height','background','orange'],        a:''      },      methods:{      }    }).$mount('#box');  </script>

自定义过滤器: model ->过滤 -> view

Vue.filter(name,function(input){});

<div id="box">    {{a | toDou 1 2}}  </div>  <script>    Vue.filter('toDou',function(input,a,b){      alert(a+','+b);      return input<10?'0'+input:''+input;    });    var vm=new Vue({      data:{        a:9      },      methods:{      }    }).$mount('#box');  </script>

时间转化器

<div id="box">    {{a | date}}  </div>  <script>    Vue.filter('date',function(input){      var oDate=new Date(input);      return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();    });    var vm=new Vue({      data:{        a:Date.now()//返回1970 年 1 月 1日午夜与当前日期和时间之间的毫秒数。      },      methods:{      }    }).$mount('#box');  </script>

过滤html标记

双向过滤器:*

Vue.filter('filterHtml',{　　read:function(input){ //model-view　　　　return input.replace(/<[^<+]>/g,'');　　},　　write:function(val){ //view -> model　　　　return val;　　}});

数据 -> 视图

model -> view

view -> model

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title></title>  <style>  </style>  <script src="vue.js"></script>  <script>    //<h2>welcome</h2>    Vue.filter('filterHtml',{      read:function(input){ //model-view        alert(1);        return input.replace(/<[^<]+>/g,'');      },      write:function(val){ //view -> model        console.log(val);        return val;      }    });    window.onload=function(){      var vm=new Vue({        data:{          msg:'<strong>welcome</strong>'        }      }).$mount('#box');    };  </script></head><body>  <div id="box">    <input type="text" v-model="msg | filterHtml">    <br>    {{msg | filterHtml}}  </div></body></html>

希望本文所述对大家vue.js程序设计有所帮助。

上一篇：element-ui组件table实现自定义筛选功能的示例代码

下一篇：vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】