Vue 筛选
對數據進行篩選功能。
**功能分析:**當你輸入一串文字時,以最快的速度篩選出相對應的內容,如果沒有對應的內容則不予顯示。
效果演示
原始樣式
在輸入框輸入平板時篩選相應的內容
代碼演示
**注意:**引入Vue.js架包
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="out"><h1>輸入數據進行篩選</h1><input type="text" v-model="texts"/><ul v-for="item in list"><li>{{item}}</li></ul></div></body><script type="text/javascript">var vm = new Vue({el:"#out",data:{texts:"",arr:["手機","電腦","電視","平板","電話","耳機","鼠標","鍵盤","顯示器"]},computed:{list(){let arr1 = []this.arr.map(function(item){if(item.indexOf(this.texts)!=-1){arr1.push(item)} }.bind(this))return arr1}}})</script></html>掃一掃關注我的公眾號獲取更多資訊呦!!!
總結
- 上一篇: 谷歌浏览器外贸版_外贸 网站移动端优化
- 下一篇: linux下阻塞的系统调用,Linux下