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

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值