이제 두 번째 수준에서 기본적으로 첫 번째 옵션 값을 선택하는 vue select 두 번째 수준 연결의 예를 공유하겠습니다. 좋은 참조 값이 있으므로 모든 사람에게 도움이 되기를 바랍니다.
예를 들어 2차 연결을 위한 국가를 선택할 때, 국가 선택 시 기본적으로 첫 번째 도시가 선택되도록 하려면 해당 국가 선택에 @change 이벤트를 추가하면 됩니다
<p 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> </p>
data countryName:{}, cityName:"请选择城市", area:[ { "country":"美国", "city":[ "纽约", "洛杉矶", "旧金山", "西雅图", "波士顿", "休斯顿", "圣地亚哥", "芝加哥", "其它", ] }, { "country":"加拿大", "city":[ "温哥华", "多伦多", "蒙特利尔", "其它" ] }, { "country":"澳大利亚", "city":[ "悉尼", "墨尔本", "其它" ] }, { "country":"新加坡", "city":[ "新加坡" ] }, /*{ "country":"中国", "city":[ "北京市", ] },*/ ],
방법:
selectCountry(value){ this.cityName=this.countryName.city[0]; },
위는 모든 사람을 위해 편집했습니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
Node.js에서 DNS 모듈을 사용하는 방법(자세한 튜토리얼)
Vue에서 사용자 정의 명령어를 작동하여 체크박스 선택 기능을 구현하는 방법
위 내용은 Vue에서 보조 연결을 구현하는 방법과 관련하여 기본적으로 첫 번째 값이 선택됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!