vue.js过滤

来源：互联网发布：linux 内核参数编辑：程序博客网时间：2024/05/20 21:22

第一种filterBy

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/vue.js" ></script></head><body><div id="app"><input type="text" v-model="a" /><ul v-for="item in msgData | filterBy a"><li>{{item}}</li></ul></div><script>new Vue({el:"#app",data:{msgData:["apple","tomato","banner","watch"],a:""}})</script></body></html>

第二种 limitBy

<!DOCTYPE html><html><head><meta charset="UTF-8"><script type="text/javascript" src="js/vue.js" ></script><title></title></head><body><div id="app"><li v-for="x in list|limitBy 2 list.length-2">{{x}}</li></div><script>new Vue({el:"#app",data:{list:[1,2,3,4,5]}})</script></body></html>

第三种 dcbounce 配合事件延迟显示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/vue.js" ></script></head><body><div id="app"><input type="text" @click="up()|debounce 500"/></div><script>new Vue({el:"#app",methods:{up:function(){alert(2)}}})</script></body></html>

阅读全文

0 0