使用Vue实现数据的模糊匹配

采用方法

1. v-model
2. 自定义属性 computed
3. v-for

实现思路

1. 首先使用 v-model 获取用户输入的关键字；
2. 采用Vue中的自定义属性，返回符合条件的数据；
3. 最后使用 v-for 指令，展示结果。

实例展示

<div id="app">
    <input type="text" v-model="keyword" placeholder="请输入年龄">
    <div v-for="item of result">
        <p>{{item.name}}</p>
    </div>
</div>

Vue.createApp({
    data(){
        return{
            list:[
                {name:'小明',age:18},
                {name:'小红',age:14},
                {name:'小刚',age:18},
                {name:'小王',age:16},
                {name:'小芳',age:14},
            ],
            keyword:''
        }
    },
    computed:{
        result(){
                if(this.keyword){
                    return this.list.filter(item =>{
                        return item.age == this.keyword
                    })
                }else{
                    return this.list
                }
        }
    }
}).mount('#app')

成果展示