1.使用select

2.通过watch动态的监听刷新数据

布局

 <select v-model="Province">
        <option v-for="option in arr" :value="option.name">
          {{ option.name }}
        </option>
      </select>
      <select v-model="city">
        <option v-for="option in cityArr" :value="option.name">
          {{ option.name }}
        </option>
      </select>

数据

data() {
      return {
   
        arr: [
          {name: "湖南省", sub: [{name: "长沙市"}, {name: "娄底市"},]},
          {name: "江西省", sub: [{name: "南昌市"}, {name: "九江市"},]},
        ],
        Province: '湖南省',
        city: '长沙市',
        cityArr: [],
        }
      }，

 beforeMount: function () {
      this.updateCity();
    },
    methods: {
      updateCity() {
        for (let i in this.arr) {
          let obj = this.arr[i].name;
          if (obj == this.Province) {
            this.cityArr = this.arr[i].sub;
          } else {
            this.cityArr = this.arr[0].sub;
          }
        }
      },
    },
watch:{
      Province:function () {
        this.updateCity();
        console.info('Province='+this.Province)
      },
      city:function () {
        console.info('city='+this.city)
      },
    },

参考：https://www.cnblogs.com/zhishaofei/p/6964673.html

。。。