當(dāng)前位置：
首頁(yè) >
Vue 筛选
發(fā)布時(shí)間：2025/3/12
38
豆豆
對(duì)數(shù)據(jù)進(jìn)行篩選功能。
**功能分析：**當(dāng)你輸入一串文字時(shí)，以最快的速度篩選出相對(duì)應(yīng)的內(nèi)容，如果沒有對(duì)應(yīng)的內(nèi)容則不予顯示。
效果演示
原始樣式
在輸入框輸入平板時(shí)篩選相應(yīng)的內(nèi)容
代碼演示
**注意：**引入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>輸入數(shù)據(jù)進(jìn)行篩選</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:["手機(jī)","電腦","電視","平板","電話","耳機(jī)","鼠標(biāo)","鍵盤","顯示器"]},computed:{list(){let arr1 = []this.arr.map(function(item){if(item.indexOf(this.texts)!=-1){arr1.push(item)} }.bind(this))return arr1}}})</script></html>掃一掃關(guān)注我的公眾號(hào)獲取更多資訊呦！！！
總結(jié)
- 上一篇： 谷歌浏览器外贸版_外贸 网站移动端优化
- 下一篇： Vue的安装和配置