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

vue中 实现搜索功能

input 中 v-model 绑定

    

{{item.name}}

编号：{{item.number}}

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

}

})

}

}

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓