vue实现下拉框二级联动效果的实例代码

下面是详细讲解「Vue实现下拉框二级联动效果的实例代码」的完整攻略。本攻略分为以下四个部分：

前置知识
实现思路
示范代码
总结

1. 前置知识

在学习本攻略之前，你需要知道以下知识：

Vue.js框架的基础使用
Vue组件和父子组件之间的通信
Vue的computed属性

如果对上述知识不熟悉，可以先去学习相关的知识。

2. 实现思路

下拉框的二级联动效果，可以通过使用Vue中的computed属性和watcher监听来实现。

具体思路如下：

在数据源中定义一个地区的数组，数组中每一项都是一个对象，包含省份名字和对应的城市数组。
在模板中使用两个select元素，第一个展示省份，第二个展示省份对应的城市。
当第一个select元素的值改变时，自动改变第二个select元素的options数据。

3. 示范代码

下面是一个实现下拉框二级联动效果的示例代码。

<template>
  <div>
    <div>
      <label for="province">省份：</label>
      <select id="province" v-model="selectedProvince">
        <option v-for="(province, index) in provinces" :key="index">{{ province.name }}</option>
      </select>
    </div>
    <div>
      <label for="city">城市：</label>
      <select id="city" v-model="selectedCity">
        <option v-for="(city, index) in cities" :key="index">{{ city }}</option>
      </select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      provinces: [
        {
          name: '北京',
          cities: ['朝阳区', '海淀区', '丰台区', '通州区']
        },
        {
          name: '上海',
          cities: ['黄浦区', '徐汇区', '长宁区', '静安区']
        },
        {
          name: '广东',
          cities: ['广州市', '深圳市', '珠海市', '汕头市']
        }
      ]
    }
  },
  computed: {
    cities() {
      const province = this.provinces.filter(p => p.name === this.selectedProvince)[0]
      return province ? province.cities : []
    }
  },
  watch: {
    selectedProvince() {
      this.selectedCity = ''
    }
  }
}
</script>

以上代码中，首先定义了一个数据源 provinces，它是一个数组，每个成员都包含一个省份名字和对应的城市数组。在模板中使用了两个select元素，第一个元素展示省份列表，第二个元素展示对应省份的城市列表。

在computed属性中，定义了cities数组，用作第二个select元素的option列表。这里通过filter函数找到对应省份的城市列表。在watcher中监听selectedProvince变量的变化，当该变量发生变化时，将selectedCity赋值为空。