您好,登錄后才能下訂單哦!
這篇文章主要介紹vue如何實現(xiàn)全匹配搜索列表內(nèi)容,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
vue實現(xiàn)全匹配搜索列表內(nèi)容的具體代碼如下
效果:
組件代碼:
<template> <div> <!-- 搜索框加按鈕 --> <el-input placeholder="請搜索關(guān)鍵詞" prefix-icon="el-icon-search" v-model="keyword"></el-input> <el-button class="searchbtn" @click="search">搜索</el-button> <!-- 數(shù)據(jù) --> <ul> <li v-for="(item,index) in agentlisttwo" :key="item.id" > <p>{{item.userID}}</p> <p>{{item.agentnum}}</p> <p>{{item.username}}</p> <p>{{item.phone}}</p> </li> </ul> </div> </template> <script> export default { data() { return { keyword:'',//搜索關(guān)鍵詞 agentlisttwo:'',//搜索重定義數(shù)組 agentlist: [{ userID: "1240", agentnum: "22", username: "張無忌", phone: "13112345678", },{ userID: "1241", agentnum: "23", username: "林平之", phone: "13114785236", },{ userID: "1242", agentnum: "24", username: "令狐沖", phone: "13196584589", },{ userID: "1243", agentnum: "25", username: "獨孤求敗", phone: "13115963256", },{ userID: "1244", agentnum: "26", username: "包租婆", phone: "13110254523", },{ userID: "1245", agentnum: "27", username: "韋小寶", phone: "13187455236", },{ userID: "1246", agentnum: "28", username: "小燕子", phone: "13174552223", },{ userID: "1247", agentnum: "29", username: "花無期", phone: "13174586358", }], } }, // 創(chuàng)建完成時 created() { //重定義數(shù)組 this.agentlisttwo = this.agentlist; }, methods: { search(){ //搜索 var keyword = this.keyword; if (keyword) { this.agentlisttwo = this.agentlist.filter(function(agentlist) { return Object.keys(agentlist).some(function(key) { return String(agentlist[key]).toLowerCase().indexOf(keyword) > -1 }) }) }else{ this.agentlisttwo = this.agentlist; } }, }, } </script> <style scoped> p{ width: 300px; height: 30px; line-height: 30px; border:1px solid black; text-align: center; } .p1{ color: red; } </style>
以上是“vue如何實現(xiàn)全匹配搜索列表內(nèi)容”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。