无字符要求起查

<template>
  <div class="home">
      <div>
        <input type="text" placeholder="请输入..." v-model="searchVal">
        <ul v-if="flag">
          <li v-for="(item,index) in NewItems" :key="index" @click="value(item)">{{item.name}}</li>
        </ul>
      </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {
      searchVal: '',
      items: [
        {
          name: '上海是我家',
          value: 'sh'
        },
        {
          name: '北京环境靠大家',
          value: 'bj'
        },
        {
          name: '重庆垃圾要分类',
          value: 'cq'
        },
        {
          name: '嗨幺妹',
          value: 'hhh'
        },
        {
          name: '海上我冲浪',
          value: 'hs'
        },
        {
          name: '京都',
          value: 'jd'
        },
        {
          name: '上海哈喽',
          value: 'hl'
        }
      ],
      flag: false
    }
  },
  computed: {
    NewItems() {
      let _this = this
      let NewItems = []
      // 控制几个字符起查
      // if (_this.searchVal.length >= 2) {
      this.items.map((item) => {
        if (item.name.search(_this.searchVal) != -1) {
          NewItems.push(item)
          if (_this.searchVal == item.name) {
            _this.flag = false
          }
        }
      })
      // }
      return NewItems
    }
  },
  watch: {
    searchVal(newold, lodval) {
      if (newold == this.searchVal) {
        this.flag = true
      }
      if (newold == '') {
        this.flag = false
      }
    }
  },
  methods: {
    value(item) {
      this.searchVal = item.name
      this.flag = false
    }
  },
  mounted() {
  },
  created() {
  }
}
</script>

<style scoped>

</style>

大于两个字符或者是更多字符起查

<template>
  <div class="home">
      <div>
        <input type="text" placeholder="请输入..." v-model="searchVal">
        <ul v-if="flag">
          <li v-for="(item,index) in NewItems" :key="index" @click="value(item)">{{item.name}}</li>
        </ul>
      </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {
      searchVal: '',
      items: [
        {
          name: '上海是我家',
          value: 'sh'
        },
        {
          name: '北京环境靠大家',
          value: 'bj'
        },
        {
          name: '重庆垃圾要分类',
          value: 'cq'
        },
        {
          name: '嗨幺妹',
          value: 'hhh'
        },
        {
          name: '海上我冲浪',
          value: 'hs'
        },
        {
          name: '京都',
          value: 'jd'
        },
        {
          name: '上海哈喽',
          value: 'hl'
        }
      ],
      flag: false
    }
  },
  computed: {
    NewItems() {
      let _this = this
      let NewItems = []
      // 控制几个字符起查
      if (_this.searchVal.length >= 2) {
        this.items.map((item) => {
          if (item.name.search(_this.searchVal) != -1) {
            NewItems.push(item)
            if (_this.searchVal == item.name) {
              _this.flag = false
            }
          }
        })
      }
      return NewItems
    }
  },
  watch: {
    searchVal(newold, lodval) {
      if (newold == this.searchVal) {
        this.flag = true
      }
      if (newold == '') {
        this.flag = false
      }
    }
  },
  methods: {
    value(item) {
      this.searchVal = item.name
      this.flag = false
    }
  }
}
</script>

<style scoped>

</style>

首先这只是一个列子，可把列子复制粘贴出来运行(我不会上传视频看效果)，不用增加别的多余代码。直接模仿列子干活。样式自己写。