通过vue实现二级联动select-前端-阿习进阶博客
Java
MySQL
大数据
Python
前端
黑科技
    首页 >> 互联网 >> 前端

通过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 }...
<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

本文来自阿习进阶博客,如若转载,请注明出处:https://yanxias.com

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

联系人:阿习

手机号:156****7890

留言内容:欢迎大家一起讨论文章,有喜欢发帖的可以私聊我给你开权限,发文章

留言时间:2022-05-09 17:46:15

回复内容:互联网阿习

回复时间:2022-05-09 17:46:15

用户IP:220.***.***.232

用户操作系统:Windows 10

欢迎加Easy的QQ