vue过滤器用法实例分析

时间：2021-05-26

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

过滤器:

vue提供过滤器:

capitalizeuppercasecurrency....

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

debounce 配合事件，延迟执行

数据配合使用过滤器:

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

<div id="box"> <ul>  <li v-for="val in arr | limitBy 2"> {{val}} </li> <br/> <br/>  <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程序设计有所帮助。

vue过滤器用法实例分析

相关文章

YII Framework的filter过滤器用法分析

AngularJS常见过滤器用法实例总结

Vue filter介绍及其使用详解

PHP Filter过滤器全面解析

详解Vue自定义过滤器的实现