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

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

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

<template>
  <div>
    <div v-for="(item, index) in dataList" :key="index">
      <div class="dropdown" :id="'dropdown-' + index">
        <button class="dropbtn">{{ item.title }}</button>
        <div class="dropdown-content">
          <a href="#" v-for="(subItem, subIndex) in item.subList" :key="subIndex">{{ subItem }}</a>
        </div>
      </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: [
          {
            title: '菜单1',
            subList: ['选项1', '选项2', '选项3']
          },
          {
            title: '菜单2',
            subList: ['选项4', '选项5', '选项6']
          },
          {
            title: '菜单3',
            subList: ['选项7', '选项8', '选项9']
          }
        ]
      }
    },
    mounted() {
      // 添加样式文件
      let link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = '@/assets/css/dropdown.css'
      document.head.appendChild(link)
    }
  }
</script>

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