the main question is: how to distinguish between matching data that meet the requirements and data that do not meet the requirements through v-show to distinguish whether they are displayed or not? (all kinds of traversing, and even thought of turning the list into an object and then setting up vshow, although it can be achieved, but it is too troublesome, so ask the bosses, is there any good solution? For external resources, only jq and vuejs
have been introduced here.the format of the data returned by the background is
fruitList:["","","","","","","","","","",""],Page code is
<label for="search_name" class="search_img"></label>
<input type="text" id="search_name" class="head_search2" placeholder="()"
@input="search">
//
<ul class="obvers_ul">
<li class="pro_li" v-for="(item,index) in fruitList" v-show="fruitSearch" @click="exactContent(item)">
{{item}}
</li>
</ul>js Code
search:function () {
var cus_tname=$("-sharpsearch_name").val();
for(var i=0;i<this.fruitList.length;iPP){
if(this.fruitList[i].indexOf(cus_tname)>=0){
console.log(this.fruitList[i]+"");
}else {
console.log(this.fruitList[i]+"")
}
}
},Page realization effect:
