Vue笔记

最新推荐文章于 2023-08-23 18:18:06 发布

Jessie.Zhai

最新推荐文章于 2023-08-23 18:18:06 发布

阅读量293

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/MichelleZhai/article/details/80790328

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

点击查看vue整理
vue实现一个三级联动的城市列表　
其实第一步就是flex布局好三局联动的layout,之后就是请求数据实时更新城市列表的内容，默认情况下的内容都是取到第一列表城市显示，其他的联动绑定点击事件请求接口即可，一下是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cityInfo</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    <style>
        .cityBox{
            width:600px;
            display:flex;
            height:400px;
        }
        .cityList{
            width:100px;
            flex:0 100px;
        }
        .areaList{
            width:150px;
            flex:0 150px;
        }
        .stationList{
            width:200px;
            flex:0 200px;
        }
    </style>
</head>
<body>
<div id="cityExample" class="cityBox">
    <div class="cityList">
        <div v-for="(item ,index) in cityList" :key="index" @click="tabChange()">{{item}}</div>
    </div>
    <div class="areaList">
        <div v-for="(item ,index) in areaList" :key="index">{{item}}</div>
    </div>
    <div class="stationList">
        <div v-for="(item ,index) in stationList" :key="index">{{item}}</div>
    </div>
</div>
<script>
    new Vue({
        el:'#cityExample',
        data:{
            cityList:[
               '城市1','城市2','城市3'
            ],
            areaList:['浦东','黄浦','闵行','徐汇'],
            stationList:['南京东西','虹桥','火车站','汽车站','fengxian'],
        },
        methods:{
            tabChange(){
                //去请求某接口更新值即可
                this.areaList=['1','1','2','3','4','5']
                this.stationList=['10','10','20','30','40','50']
            }
        }
    })
</script>
</body>
</html>