v-show模拟百度搜索框的功能

百度搜索框：

它的功能思路是input框输入内容，就能显示相应的内容，类似于模糊查询。
我们要完成这样的功能需要先模拟一些数据，然后把这些数据绑定给input框，接着就是利用v-show的性能，这里我们需要一个数组方法，includes(),根据这个方法去查询，但如何做到查询到数据的同时其他数据隐藏起来，我们可以去了解&&和||的定义。&&是只要前面数据为假，无论&&后面是false还是true,结果都是返回&&前面的值；
如果&&前面为真，无论&&后面是false还是true,结果返回&&后面的值；||则和其相反如果||前面为假，不论||后面是false还是true，结果都是返回||后面的值；如果||千米那是真，不论||后面是false还是true,结果返回都死||前面的值；
知道这些我们就可以去尝试写代码：

<script >
    var vm = new Vue({
        el:"#root",
        data:{
            str:'',
           userList:["张三喜欢打篮球","李四是个好学生","王五获得诺贝尔奖","赵六已经结婚了"]
        }
    })
</script>

 <div id="root">
        <input type="text" v-model="str">
        <p v-for="(item,index) in userList" v-show="item.includes(str) && str != '' ">{{item}}</p>
    </div>

----------------------------------展示效果----------------------------------------