Uniapp 单数组循环 下拉菜单筛选 hover 显示

你可以通过以下步骤实现Uniapp单数组循环下拉菜单筛选hover显示：

1. 在template中使用v-for指令循环渲染数组中的数据，并使用v-bind指令绑定每个下拉菜单的唯一标识符

<template>
  <div>
    <div class="dropdown" v-for="(item, index) in dataList" :key="index" :id="'dropdown-' + index">
      <button class="dropbtn">{{ item }}</button>
      <div class="dropdown-content">
        <a href="#" v-for="(subItem, subIndex) in subList" :key="subIndex">{{ subItem }}</a>
      </div>
    </div>
  </div>
</template>

2. 在样式文件中设置下拉菜单和下拉内容的样式，并使用:hover伪类显示下拉内容

<style>
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    z-index: 1;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
</style>

3. 在script中定义数据数组和样式

<script>
  export default {
    data() {
      return {
        dataList: ['菜单1', '菜单2', '菜单3'],
        subList: ['选项1', '选项2', '选项3']
      }
    },
    mounted() {
      // 添加样式文件
      let link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = '@/assets/css/dropdown.css'
      document.head.appendChild(link)
    }
  }
</script>

这样就可以实现Uniapp单数组循环下拉菜单筛选hover显示了。