vue二级联动下拉菜单代码

Vue二级联动下拉菜单的代码可以分为两个部分：数据部分和视图部分。以下是一个简单的示例代码：

<template>
  <div>
    <select v-model="selectedFirst" @change="onChangeFirst">
      <option value="">请选择一级分类</option>
      <option v-for="(item, index) in firstList" :key="index" :value="item">{{ item.name }}</option>
    </select>
    <select v-model="selectedSecond" @change="onChangeSecond">
      <option value="">请选择二级分类</option>
      <option v-for="(item, index) in secondList" :key="index" :value="item">{{ item.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstList: [
        { id: 1, name: '分类1' },
        { id: 2, name: '分类2' },
        { id: 3, name: '分类3' },
      ],
      secondList: [],
      selectedFirst: '',
      selectedSecond: '',
    };
  },
  methods: {
    onChangeFirst() {
      if (this.selectedFirst) {
        this.secondList = this.selectedFirst.children;
        this.selectedSecond = '';
      } else {
        this.secondList = [];
        this.selectedSecond = '';
      }
    },
    onChangeSecond() {
      // do something
    },
  },
};
</script>

在这个示例中，我们定义了两个下拉菜单，一个用于选择一级分类，另一个用于选择二级分类。当用户选择一级分类时，我们会根据这个分类的子分类列表更新二级下拉菜单的选项。当用户选择二级分类时，我们会执行相应的逻辑。

以上仅为示例代码，具体实现会因应用场景和需求而有所不同。如果您还有其他问题或需要更详细的说明，请告诉我。