专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > JavaScript > 正文

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

作者:鹏仔先生日期:2020-06-03浏览:2333分类:JavaScript

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

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://cdn.sharedbk.com/sharedblog/img/1.png',
	          number: '6666666'
	        },
	        {
	          name: '小夏',
	          img: 'http://cdn.sharedbk.com/sharedblog/img/2.png',
	          number: '88888'
	        },
	        {
	          name: '喜洋洋',
	          img: 'http://cdn.sharedbk.com/sharedblog/img/3.png',
	          number: '321123'
	        },
	        {
	          name: '灰太狼',
	          img: 'http://cdn.sharedbk.com/sharedblog/img/4.png',
	          number: '898989'
	        }
      	],
	}
}


JS中

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


手机扫码访问

已有1位网友发表了看法:

  • 访客

    访客  评论于 [2020-08-11 18:27:13]  回复

    学习学习

取消回复欢迎 发表评论:

关灯