vue13过滤器 debounce延迟、limitBy、filterBy、orderBy
生活随笔
收集整理的這篇文章主要介紹了
vue13过滤器 debounce延迟、limitBy、filterBy、orderBy
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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">debounce延遲，配合鍵盤事件<input type="text" @keyup="show | debounce 2000"></div><script>var vm=new Vue({data:{},methods:{show:function(){alert(1);}}}).$mount('#box');</script>
</body>
</html>
?
<!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> 配合數組使用，2條，1.2<li v-for="val in arr | limitBy 2">{{val}}</li></ul></div><script>var vm=new Vue({data:{arr:[1,2,3,4,5]},methods:{}}).$mount('#box');</script> </body> </html> <!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> 取2個從arr.length-2開始，4.5<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>?
<!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> 包含字母‘w’的<li v-for="val in arr | filterBy 'w'">{{val}}</li></ul></div><script>var vm=new Vue({data:{arr:['width','height','background','orange']},methods:{}}).$mount('#box');</script> </body> </html>?
<!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>?
<!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 | orderBy 'o'">{{val}}</li></ul></div><script>var vm=new Vue({data:{arr:['width','height','background','orange'],a:''},methods:{}}).$mount('#box');</script> </body> </html> <!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 | orderBy -1"> <!-- -1逆序，1正序-->{{val}}</li></ul></div><script>var vm=new Vue({data:{arr:['width','height','background','orange'],a:''},methods:{}}).$mount('#box');</script> </body> </html> <!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 | orderBy a">{{val}}</li></ul></div><script>var vm=new Vue({data:{arr:['width','height','background','orange'],a:''},methods:{}}).$mount('#box');</script> </body> </html>?
總結
以上是生活随笔為你收集整理的vue13过滤器 debounce延迟、limitBy、filterBy、orderBy的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 孕妇做梦梦到被坏人追赶怎么回事
- 下一篇： html5倒计时秒杀怎么做,vue 设