标签：ping cond mon http 定义 body img 技术 oct
过滤器:
vue提供过滤器:
capitalize uppercase currency....
debounce 配合事件，延迟执行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> </script> </head> <body> <div id="box"> <input type="text" @keyup="show | debounce 2000"> </div> <script> var vm=new Vue({ data:{ }, methods:{ show:function(){ alert(1); } } }).$mount(‘#box‘); </script> </body> </html>
数据配合使用过滤器:
limitBy 限制几个
limitBy 参数(取几个)
limitBy 取几个 从哪开始
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> </script> </head> <body> <div id="box"> <ul> <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> </body> </html>
filterBy 过滤数据
filterBy ‘谁’
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> </script> </head> <body> <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> </body> </html>
li v-for="val in arr | filterBy ‘w‘"
orderBy 排序
orderBy 谁 1/-1
1 -> 正序
2 -> 倒序
自定义过滤器: model ->过滤 -> view
Vue.filter(name,function(input){ });
时间转化器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> </script> </head> <body> <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() }, methods:{ } }).$mount(‘#box‘); </script> </body> </html>
model -> view（数据 -> 视图）
view -> model
Vue.filter(‘filterHtml‘,{ read:function(input){ //model-view return input.replace(/<[^<+]>/g,‘‘); }, write:function(val){ //view -> model return val; } });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <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}}} </div> </body> </html>
标签：ping cond mon http 定义 body img 技术 oct
原文地址：https://www.cnblogs.com/zyjzz/p/9749728.html
