Vue的静态网页数据搜索，列表过滤实现

html代码，如下：

首先我们先创建一个table表格，然后设置border属性为1(给表格设置边框)

<div id="app">
        <h1>{{msg}}</h1>
        <input type="text" placeholder="请输入要搜索到内容" v-model="content">
    <table border="1" style="text-align: center;width: 200px;height: 200px;">
        <th>id</th>
        <th>英雄</th>
        <th>能量值</th>
        <th>选择</th>
        <tr v-for="(hero,index) in filterArr" :key="hero.id">
            <td>{{hero.id}}</td>
            <td>{{hero.name}}</td>
            <td>{{hero.force}}</td>
            <td><input type="checkbox"></td>
        </tr>
    </table>
</div>

其中上面的v-model是vue的双向绑定数据。意思就是我们前端修改属性的值，对应的底层也会随之修改

我们在搜索框里面输入我们要搜索的内容，对应的，vue的底层会去修改我们的值

如果是v-bind，那我们页面修改值则不会去修改底层的值。这是值得注意的一项。

然后我们的vue.js的代码如下:

<script>
        const myVue = new Vue(
           {
            el:'#app',
            data:{
                content:'',
                msg:'英雄列表',
                heros:[
                    {id:101,name:'孙悟空',force:100},
                    {id:102,name:'孙尚香',force:140},
                    {id:103,name:'李白',force:130},
                    {id:104,name:'公孙离',force:120}
                ],
                filterArr:[]
            },
            watch:{
                // content(value){
                //     console.log("test")
                //     this.filterArr = this.heros.filter((hero) =>{
                //         return hero.name.indexOf(value) >= 0
                //     })
                //          }
                content: {
                immediate:true,//浏览器加载就执行下面的handler函数
                handler(value){
                    console.log("test")
                    this.filterArr = this.heros.filter((hero) =>{
                         return hero.name.indexOf(value) >= 0
                    })
                }
                }
            }
            }
        )
    </script>

在上面有一个watch关键字，这个是vue的监听属性，意思是要对你想监听的属性进行监听设置。其中我们的content就是我们要监视的属性。如果我们的content发生变化，那我们就可以将它的值传过来，然后进行处理。我们这里是要搜索，所以我们是将传过来的值，对我们的数组里面的name属性进行匹配，也就是看看我们的value属性在不在这个name里面，如果不在则会返回false，如果在就会返回一个大于等于0的数字。这样我们再将返回的值放到数组里面。用数组去接收，然后再将这个数组遍历到前端页面。

遍历的代码如下:

<tr v-for="(hero,index) in filterArr" :key="hero.id">
            <td>{{hero.id}}</td>
            <td>{{hero.name}}</td>
            <td>{{hero.force}}</td>
            <td><input type="checkbox"></td>
        </tr>

其中hero，是定义的一个对象，index是下标。:key是按照什么属性进行遍历。然后td属性里面用插值语法进行显示出来。