简单的Vue搜索功能

记录

文章目录

• 需求
• 一、自定义json文件
• 二、.vue文件 搜索功能
• • 1.template
  • 2.script
  • 3.style
  • 4.效果图
• 总结

需求

个人纪录：

Vue 简单的搜索功能

一、自定义json文件

{"data":[{"value": "小明","key": 0},{"value": "小红","key": 1},{"value": "小蓝","key": 2},{"value": "小绿","key": 3}]
}

二、.vue文件 搜索功能

1.template

代码如下（示例）：

<template><div class="about"><h1>This is an {{listr[0]}} pageh1><input type="text" placeholder="请输入内容" style="padding:10px;" v-model="searchWord"><div class="list-box"><div class="list" v-for="(item,index) in listBox" :key="index + 'list'"><div>{{item.value + ' ' + item.key}}div>div><br><h1>搜索结果↓h1><div v-for="(item,index) in listr" :key="index + 'listshow'">{{listr[index]}}div>div>div>
template>

2.script

代码如下（示例）：

export default {data () {return {listBox: [],searchWord: '',listr: []}},mounted () {this.initList()},methods: {initList () {const listBox = require('@/assets/json/list.json')const { data } = listBoxthis.listBox = data}},watch: {searchWord () {const result = []for (let i = 0; i < this.listBox.length; i++) {const listA = this.listBox[i]if (listA.value.search(this.searchWord) !== -1 && this.searchWord !== '') {result.push(this.listBox[i].value)}}this.listr = result}}
}

3.style

.about{display: flex;flex-direction: column;align-items: center;}.list-box{width: 400px;height: 600px;background-color: lavender;overflow: auto;}

4.效果图

总结

以后再总结

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！