如何在Vue中实现双层for循环遍历的数据选择框，以便能够根据用户的选择高亮显示子数组中的某一项？

在Vue中，你可以使用v-for指令来实现双层for循环遍历数据并创建动态选择框。假设你有一个嵌套的数组结构，比如`data.items`是一个包含`category`和`items`两个属性的对象数组，你想让用户选择一个类别，并在其对应的子项上添加高亮效果，可以这样做：

<template>
  <div id="app">
    <ul v-for="(parentItem, index) in data.items" :key="index">
      <li class="parent-item" :class="{ 'highlighted': selectedCategory === parentItem.category }">
        {{ parentItem.category }}
        <ul>
          <li v-for="(childItem, childIndex) in parentItem.items" :key="childIndex"
              @click="selectChild(childItem)">
            {{ childItem }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: { ... }, // 你的数据源
      selectedCategory: null,
    };
  },
  methods: {
    selectChild(item) {
      this.selectedCategory = item.category;
      // 如果需要，还可以在这里更改item的样式使其高亮
    },
  },
};
</script>

<style scoped>
.highlighted {
  background-color: yellow; /* 可自定义高亮颜色 */
}
</style>

在这个例子中，当用户点击一个子项时，`selectChild`方法会被调用，更新`selectedCategory`状态，并可以根据这个状态改变子项的样式。