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 条评论
登录 后参与评论

相关文章

来自专栏ml

nyoj------20吝啬的国度

吝啬的国度 时间限制:1000 ms  |  内存限制:65535 KB 难度:3  描述在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市...

36370
来自专栏数据结构与算法

P2782 友好城市

题目背景 无 题目描述 有一条横贯东西的大河,河有笔直的南北两岸,岸上各有位置各不相同的N个城市。北岸的每个城市有且仅有一个友好城市在南岸,而且不同城市的友好城...

31150
来自专栏HansBug's Lab

算法模板——splay区间反转 2

实现功能:同splay区间反转 1(基于BZOJ3223 文艺平衡树) 这次改用了一个全新的模板(HansBug:琢磨了我大半天啊有木有),大大简化了程序,同时...

277100
来自专栏小樱的经验随笔

BZOJ 1411&&Vijos 1544 : [ZJOI2009]硬币游戏【递推,快速幂】

1411: [ZJOI2009]硬币游戏 Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 897  Solve...

28050
来自专栏ACM算法日常

工人的请愿书(树形DP)- UVA 12186

A couple of years ago, a new world wide crisis started, leaving many people with...

14540
来自专栏HansBug's Lab

1708: [Usaco2007 Oct]Money奶牛的硬币

1708: [Usaco2007 Oct]Money奶牛的硬币 Time Limit: 5 Sec  Memory Limit: 64 MB Submit: 5...

27270
来自专栏hotqin888的专栏

golang知识图谱NLP实战第三节——实体三元组关系抽取

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

69230
来自专栏数据结构与算法

P1294 高手去散步

题目背景 高手最近谈恋爱了。不过是单相思。“即使是单相思,也是完整的爱情”,高手从未放弃对它的追求。今天,这个阳光明媚的早晨,太阳从西边缓缓升起。于是它找到高手...

28680
来自专栏冰枫

CountDownLatch和CyclicBarrier解决运动员赛跑多线程问题

最近有道多线程的面试题: 五个运动员(相当于五个线程),一个裁判(Main线程),满足以下三个条件,如何实现: 1.同时起跑 2.要所有运动员都到达终点以...

46270
来自专栏数据结构与算法

洛谷P2606 [ZJOI2010]排列计数(组合数 dp)

那么当前点$i$为根节点,大小为$siz[i]$,左/右儿子分别为$ls, rs$

17810

扫码关注云+社区

领取腾讯云代金券