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

vue中 实现搜索功能

原文地址 http://www.sharedblog.cn/?post=207

input 中 v-model 绑定

    

    	
        

            
{{item.name}}
            编号：{{item.number}}
        
    

 

data中定义 userList 为数组列表

inputKey 为搜索参数

data () {
	return{
		// 搜索关键词
		inputKey: '',
		// 用户列表
      	userList: [
	        {
	          name: '小明',
	          img: 'http://www.sharedblog.cn/content/templates/emedia_better/pic/ap6.jpg',
	          number: '6666666'
	        },
	        {
	          name: '小夏',
	          img: 'http://www.sharedblog.cn/content/templates/emedia_better/pic/ap8.jpg',
	          number: '88888'
	        },
	        {
	          name: '喜洋洋',
	          img: 'http://www.sharedblog.cn/content/templates/emedia_better/pic/ap5.jpg',
	          number: '321123'
	        },
	        {
	          name: '灰太狼',
	          img: 'http://www.sharedblog.cn/content/templates/emedia_better/pic/ap5.jpg',
	          number: '898989'
	        }
      	],
	}
}

 

JS中

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