vue二級聯動select

<div>
          <span>所在區域</span>
          <select name="" v-model="country">
            <option :value="item" v-for="(item,index) in area">{{item.country}}</option>
          </select>
          <select name="" v-model="cityName">
            <option :value="item" v-for="(item,index) in country.city">{{item}}</option>
          </select>
</div>

vue data:

export default{
    data(){
      return {
        countryName:"",
        cityName:"",    
        area:[
          {
            "country":"美國",
            "city":[
              "紐約",
              "洛杉磯",
              "舊金山",
              "西雅圖",
              "波士頓",
              "休斯頓",
              "聖地亞哥",
              "芝加哥",
              "其它",
            ]
          },
          {
            "country":"加拿大",
            "city":[
              "溫哥華",
              "多倫多",
              "蒙特利爾",
              "其它"
            ]
          },
          {
            "country":"澳大利亞",
            "city":[
              "悉尼",
              "墨爾本",
              "其它"
            ]
          },
          {
            "country":"新加坡",
            "city":[
              "新加坡"
            ]
          },
          /*{
           "country":"中國",
           "city":[
              "北京市",
           ]
           },*/
        ],
      }
    },

 
實現原理：經過vue v-model 綁定獲取到area當前的對象，讓後city遍歷的時候世界遍歷當前獲取到的國際的對象下的city就好，當須要向後臺傳值的，要傳的是vue實例下 this.countryName.country
轉載於猿2048:→《vue二級聯動select》