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

2020-11-25 10:07发布

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


JS中

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



作者:鹏仔先生

链接:http://sharedblog.cn/post/169.html

来源:共享播客
著作权归作者所有,转载请联系作者获得授权,切勿私自转载。