vue中实现对一个数组进行搜索 vue实现搜索功能

作者：鹏仔先生日期：2020-06-03 12:11:20 浏览：5032 分类：JavaScript

vue中实现搜索功能

input 中 v-model 绑定

<input type="text" placeholder="按主页名称或编号搜索" v-model="inputKey">

<div>
    <div v-for="(item,index) in search(inputKey)" :key='index'>
    	<img :src="item.img" alt="">
        <div>
            <p>{{item.name}}</p>
            <span>编号：{{item.number}}</span>
        </div>
    </div>
</div>

data中定义 userList 为数组列表

inputKey 为搜索参数

data () {
	return{
		// 搜索关键词
		inputKey: '',
		// 用户列表
      	userList: [
	        {
	          name: '小明',
	          img: 'http://sharedbk.com/zb_users/upload/2023/01/1.png',
	          number: '6666666'
	        },
	        {
	          name: '小夏',
	          img: 'http://sharedbk.com/zb_users/upload/2023/01/2.png',
	          number: '88888'
	        },
	        {
	          name: '喜洋洋',
	          img: 'http://sharedbk.com/zb_users/upload/2023/01/3.png',
	          number: '321123'
	        },
	        {
	          name: '灰太狼',
	          img: 'http://sharedbk.com/zb_users/upload/2023/01/4.png',
	          number: '898989'
	        }
      	],
	}
}

JS中

methods: {
    // 搜索
    search (indexKey) {
		return this.userList.filter(item => {
			if (item.name.includes(indexKey)) {
				return item
			}
		})
    }
}