<!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>
--list和hlist)
)
