Vue：简单的select联动

选择区域，学校就联动显示该区域下可选择的学校名称，效果如下：

THML：

<template>
<div id="millia" class="bg01">
<ul class="robotName">
<li><i>区域</i>
<select class="sel01" v-model="area" @change="selectArea($event)">
<option value="isArea">请选择学校所在区域</option>
<option v-for="(items,index) in areaSchool" :key="index" :value="items.area">{{items.area}}</option>
</select>
</li>
<li><i>学校</i>
<select class="sel01" v-model="school" @change="selectSchool($event)">
<option value="isSchool">请选择学校</option>
<option v-for="(items,index) in selectSchoolData" :key="index" :value="items">{{items}}</option>
</select>
</li>
</ul>
</div>
</template>

 JS：

data(){
  return{
    areaSchool: [
      { area: "芝罘区", school: ["葡萄山小学", "工人子女小学", "塔山小学", "养正小学", "惠安小学", "外国语实验学校", "国翠小学", "鼎城小学", "毓璜顶小学", "南山路小学", "南通路小学", "潇翔小学", "御龙山学校", "祥发小学", "航天小学", "只楚小学", "山水龙城小学", "惠安小学", "幸合里小学", "珠玑小学", "文化路小学", "鲁峰小学", "青年路小学", "新海阳小学", "万华小学", "通伸小学", "芝罘岛小学", "支农里小学", "龙海小学", "建昌街小学", "幸福小学", "凤凰台小学", "双语实验学校", "鲁东大学实验小学", "官庄小学", "港城小学", "东方外国语实验学校", "西牟小学", "第五中学", "第十一中学", "祥和中学", "港城中学", "第九中学", "烟台十中", "傅家中学"] },
      { area: "莱山区", school: ["实验小学", "第七小学", "第四实验小学", "第九小学", "第三实验小学", "烟台大学附属中学", "第八小学", "第六小学", "第二实验小学"] },
      { area: "福山区", school: ["实验小学", "西关小学", "河滨路小学", "福惠小学", "天府街小学", "实验中学", "崇文中学", "东华小学",] },
      { area: "开发区", school: ["爱华双语学校", "第八初级中学", "第六初级中学", "第三初级中学", "高级中学", "第六小学", "第七小学", "第三小学", "第四小学", "第五小学", "古现中心小学", "金城小学", "谦益小学", "第九小学", "第十一小学", "古现第二小学", "实验小学", "耀华实验学校", "第五初级中学", "八角第二小学", "第七初级中学", "第一初级中学", "实验中学", "八角中心小学", "大季家中心小学", "第八小学", "第十小学", "第一小学", "金东小学", "潮水中学", "潮水中心小学",] },
      { area: "高新区", school: ["益文小学", "高新区实验中学"] },
      { area: "牟平区", school: ["文化街道新建街小学","第二实验小学","北大附属实验学校烟台学校","实验小学","宁海街道中心小学","龙湖小学","文化街道中心小学","武宁街道五里头学区小学","丰金国学学校","文昌小学","新牟小学","观水中学小学部、埠西头小学","宁海中学"] },
      { area: "蓬莱区", school: ["第二实验小学","第三实验小学"]},
      { area: "莱州市", school: ["第一中学", "第十三中学", "第五中学", "云峰中学", "文泉学校", "神堂中学", "实验中学", "双语学校", "城港路街道中心小学", "第三实验小学", "实验小学", "扬务沟学校", "第二实验小学", "郭家店镇仲院小学", "莱州中心小学", "汇泉学校", "文昌小学", "夏邱镇中心小学", "夏邱镇屯里小学"] },      
      { area: "龙口市", school: ["红旗小学", "复粹学校", "实验小学", "北皂学校", "龙口经济开发区龙口学校", "黄城实验中学"] },
      { area: "栖霞市", school: ["实验小学", "桃村中心小学","翠屏中学","蛇窝泊中学","庄园中学"] },
      { area: "招远市", school: ["龙馨学校", "金晖学校","魁星路小学","实验小学","玲珑镇沟上完全小学","泉山学校","西苑学校","丽湖学校","蚕庄初级中学"] },
      { area: "莱阳市", school: ["第三实验学校","盛隆小学","和平小学","童心小学","第二实验小学","文化路学校","白龙路小学","实验小学","文峰学校","古柳中心小学","文昌小学","万第中心初级中学","第一中学","古柳中心中学","西关小学","第二实验中学",] },
    ], 
    school: "isSchool",//学校
    area:"isArea",//学校所在区域     
    selectSchoolData:{},//选择区域对应学校数据
  }
},
methods:{
  //学校区域选择
  selectArea(event) {
    this.school = "isSchool"
    this.selectSchoolData = this.areaSchool[event.target.selectedIndex-1].school
    this.area = event.target.value
  },
  //学校选择
  selectSchool(event) {
    this.school = event.target.value
  },
}