列表过滤（模糊搜索）

body：

<!-- 列表过滤 -->
         <div class="">
                <!-- 模糊查询 -->
                <input type="text" v-model="keyWords">
                <!-- 列表渲染 -->
                <ul>
                    <li v-for="item in filterPersons" :key="item.id">
                        {{item.name}} - {{item.age}} - {{item.sex}}
                    </li>
                </ul>
            </div>

data：

data() {
            return{
            inHot: true,
            n:0,
            keyWords:"",
            // 原始数据
            persons:[
                {id:1,name:'马冬梅',age:18,sex:"女"},
                {id:2,name:"周冬雨",age:19,sex:"女"},
                {id:3,name:"周杰伦",age:20,sex:"男"},
                {id:4,name:"温兆伦",age:21,sex:"男"},
            ],
            
            
            }
        },

computed:

computed: {
            filterPersons(){
                return this.persons.filter((item) => {
                    return item.name.indexOf(this.keyWords) != -1
                })
            }
        },

本来的样子

 

 过滤后的样子