鍍金池/ 問答/HTML5  HTML/ vuejs模擬百度下拉框搜索,如何設(shè)計數(shù)據(jù)的v-show屬性？

vuejs模擬百度下拉框搜索,如何設(shè)計數(shù)據(jù)的v-show屬性？

主要問題是：匹配出來符合要求的數(shù)據(jù)和不符合要求的數(shù)據(jù)如何通過v-show來設(shè)計區(qū)分它們的顯示與否呢？（各種遍歷，甚至想到了把列表轉(zhuǎn)為對象再設(shè)置v-show，雖然能實(shí)現(xiàn)但是太麻煩了，所以來問問大佬們，有沒有什么好的解決方案呢？???）
關(guān)于外部資源，這里只引入了jq和vuejs

后臺返回的數(shù)據(jù)格式為：

fruitList:["蘋果","香蕉","鴨梨","葡萄","荔枝","芒果","石榴","西瓜","橘子","橘子汁","蘋果汁"],

網(wǎng)頁代碼為：

<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代碼

search:function () {
        var cus_tname=$("#search_name").val();
        for(var i=0;i<this.fruitList.length;i++){
            if(this.fruitList[i].indexOf(cus_tname)>=0){
                console.log(this.fruitList[i]+"符合的");
            }else {
                console.log(this.fruitList[i]+"不符合的")
            }
        }            
    },

頁面實(shí)現(xiàn)效果：

clipboard.png

回答
編輯回答
凝雅

設(shè)置個臨時數(shù)組，遍歷的時候遍歷這個臨時數(shù)組，不知這樣能否滿足你的需求。

<ul class="obvers_ul">
    <li class="pro_li" v-for="(item,index) in templist" v-show="fruitSearch" @click="exactContent(item)">
        {{item}}
    </li>
</ul>
search:function () {
        var cus_tname=$("#search_name").val();
        this.templist = [];
        for(var i=0;i<this.fruitList.length;i++){
            if(this.fruitList[i].indexOf(cus_tname)>=0){
                console.log(this.fruitList[i]+"符合的");
                this.templist.push(this.fruitList[i]);
            }else {
                console.log(this.fruitList[i]+"不符合的")
            }
        }            
    },
2018年8月11日 05:48