当二级联动比如选择国家的时候，希望选中一个国家的时候后面城市默认选中第一个城市，则给国家的select加一个@change事件就可以了

<div class="inputLine"> <span>所在区域</span> <select name="" v-model="countryName" @change="selectCountry"> <option :value="item" v-for="(item,index) in area"> {{item.country}} <svg class="icon icon-arrow-bottom" aria-hidden="true"> <use xlink:href="#icon-arrow-bottom" rel="external nofollow" rel="external nofollow" ></use> </svg> </option> </select> <select name="" v-model="cityName"> <option :value="item" v-for="(item,index) in countryName.city"> {{item}} <svg class="icon icon-arrow-bottom" aria-hidden="true"> <use xlink:href="#icon-arrow-bottom" rel="external nofollow" rel="external nofollow" ></use> </svg> </option> </select> </div>data countryName:{}, cityName:"请选择城市", area:[ { "country":"美国", "city":[ "纽约", "洛杉矶", "旧金山", "西雅图", "波士顿", "休斯顿", "圣地亚哥", "芝加哥", "其它", ] }, { "country":"加拿大", "city":[ "温哥华", "多伦多", "蒙特利尔", "其它" ] }, { "country":"澳大利亚", "city":[ "悉尼", "墨尔本", "其它" ] }, { "country":"新加坡", "city":[ "新加坡" ] }, ],

methods:

selectCountry(value){ this.cityName=this.countryName.city[0]; },

以上这篇vue select二级联动第二级默认选中第一个option值的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。