用vue做搜索功能（不需要后台服务器）

注意：这是一个精确查找的搜索功能，不适合半匹配搜索！

在components 中建一个hello.vue组件

<template>
  <div>
    <el-col :span="4">
      <el-input @focus="foucs" type="text" v-model="search" placeholder="请输入您现在所在的位置"/>
    </el-col>
    <el-popover
      placement="bottom"
      width="200"
      content="抱歉，您搜索的内容不存在, 请重新输入"
      trigger="manual"
      v-model="visible">
      <el-button slot="reference" @click="SearchClick">搜索</el-button>
    </el-popover>
    <div
      v-if="dataList.length>0"
      :num="num"
      >
      <div v-for="(item, index) in dataList" :key="index">
        <el-col :span="2">{
   
   {item.id}}</el-col>
        <el-col :span="6">{
   
   {item.name}}</el-col>
        <el-col :span="6">{
   
   {item.localtion}}</el-col>
      </div>
    </div>
  </div>
</template>

<script>
export default {
     
     
  data () {
     
     
    return {
     
     
      visible: false,
      num: true,
      search: '',
      dataList: []
    }
  },
  methods: {
     
     
    SearchClick () {
     
     
      // 清空上次搜索的内容
      this.dataList.length = 0
      if (this.search !== '' & this.dataList.length >= 0) {
     
     
        this.getdata.filter((item, index) => {
     
     
          if (item.name.indexOf(this.search) !== -1) {
     
     
            this.dataList.push(item)
          }
        })
        // 清空搜索框
        this.search = ''
        this.visible = false
      } else {
     
     
        this.visible = true
        return false
      }
    },
    foucs () {
     
     
      this.visible = false
    }
  },
  computed: {
     
     
    getdata () {
     
     
      return this.$store.state.datashow
    }
  }
}
</script>
<style scoped>
</style>

建一个store 目录 下面建一个index.js，做一个仓库存放内容

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
    
    
  state: {
    
    
    datashow: [
      {
    
    id: '1', name: '毕节市七星关区', localtion: '李淑美'},
      {
    
    id: '2', name: '纳雍县', localtion: '何宇航'},
      {
    
    id: '3', name: '赫章县', localtion: '刘龙'},
      {
    
    id: '4', name: '威宁县', localtion: '王文刚'},
      {
    
    id: '5', name: '大方县', localtion: '列里'},
      {
    
    id: '6', name: '金沙县', localtion: '真凤英'},
      {
    
    id: '7', name: '黔西县', localtion: '王先会'}
    ]
  },

  mutations: {
    
    
    getdata (state, data) {
    
    
      this.state = data
    }
  },

  getters: {
    
    }
})

效果样式如下：

不输入任何内容，点击搜索

输入正确的内容


基本就这样了，如果感兴趣的兄弟可以拿走，写一个后台服务器，连接到数据库就成型了