検索機能にvueを使用します（バックエンドサーバーは必要ありません）

注意：これは正確な検索機能であり、セミマッチング検索には適していません。

コンポーネントに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>

ストアディレクトリの下に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: {
    
    }
})

エフェクトのスタイルは次のとおりです。

何も入力せず、[検索]をクリックして

、正しいコンテンツを入力します


。これは基本的にはそれです。興味がある場合は、それを削除して、バックエンドサーバーを作成し、データベースに接続できます。