vuejs模拟百度下拉框搜索,如何设计数据的v-show属性？

Question

主要问题是：匹配出来符合要求的数据和不符合要求的数据如何通过v-show来设计区分它们的显示与否呢？（各种遍历，甚至想到了把列表转为对象再设置v-show，虽然能实现但是太麻烦了，所以来问问大佬们，有没有什么好的解决方案呢？Ծ‸Ծ）
关于外部资源，这里只引入了jq和vuejs

后台返回的数据格式为：

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

网页代码为：

<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]+"不符合的")
            }
        }            
    },

页面实现效果：

Answer 1

设置个临时数组，遍历的时候遍历这个临时数组，不知这样能否满足你的需求。

<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]+"不符合的")
            }
        }            
    },