找回密码
当前位置：前端开发者 > Vue.js > 正文

前端开发用Vue.js来实现城市三级联动

2018-10-22 分类：Vue.js 阅读(1092) 评论(0)
excel前端程序开发
程序开发前端后端区分
小程序开发属于前端吗

城市数据来自百度的js文件这个用jq来写城市三级联动，最近在玩vue,就心血来潮，用vue来实现了一遍，个人比较懒，样式直接copy原笔记的，希望作者不会打我

在处理数据的情况下，MVVM框架的确比jq好用多了，特别是有状态改变的时候。
很多人说jq已经是过时的，不过，我不觉得。像做全屏滚动的h5页面这种没有数据交互的页面的时候，jq比MVVM框架就好用多了。
现在框架好多，没有绝对的好与坏，看情况选择合适的框架才是！
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”utf-8″>
    <style>
        .selBoxList {
            width: 100%;
            margin-top: 50px;
            text-align: center;
        }
        .selBoxList .selSt {
            min-width: 100px;
            display: inline-block;
            position: relative;
            ;
        }
        .selBoxList .selSt .current {
            width: 100%;
            padding: 0 10px;
            font-size: 16px;
            line-height: 30px;
            cursor: pointer;
            float: left;
            border: 1px solid #ccc;
            background: #fff;
            box-sizing: border-box;
            position: relative;
            z-index: 2;
        }
        .selBoxList .selSt .box {
            width: 100%;
            position: absolute;
            left: 0;
            top: 30px;
            border: 1px solid #ccc;
            max-height: 300px;
            overflow: auto;
            box-sizing: border-box;
        }
        .selBoxList .selSt .box span {
            width: 100%;
            font-size: 16px;
            line-height: 30px;
            cursor: pointer;
            border-top: 1px solid #ccc;
            float: left;
        }
        .selBoxList .selSt .box span:hover {
            background: #f1f1f1;
        }
    </style>
</head>
<body>
    <div class=”selBoxList”>
        <span class=”selSt selProvince”>
            <span class=”current” @click=”toggleSelect(0)”><span v-if=”!proIndex”>–请选择–</span><span v-if=”proIndex”>{{cityArr[proIndex].name}}</span></span>
            <span class=”box” v-show=”showSelect === 0″>
                <span v-for=”n in cityArr.length” @click=”setOption(‘proIndex’, $index)”>{{cityArr[n].name}}</span>
            </span>
        </span>
        <span class=”selSt selCity”>
            <span class=”current” @click=”toggleSelect(1)”><span v-if=”!cityIndex”>–请选择–</span><span v-if=”cityIndex”>{{cityArr[proIndex].sub[cityIndex].name}}</span></span>
            <span class=”box” v-show=”showSelect === 1″>
                <span v-if=”cityArr[proIndex].sub.length” v-for=”n in cityArr[proIndex].sub.length” @click=”setOption(‘cityIndex’, $index)”>{{cityArr[proIndex].sub[n].name}}</span>
            </span>
        </span>
        <span class=”selSt selArea”>
            <span class=”current” @click=”toggleSelect(2)”><span v-if=”!areaIndex”>–请选择–</span><span v-if=”areaIndex”>{{cityArr[proIndex].sub[cityIndex].sub[areaIndex].name}}</span></span>
            <span class=”box” v-show=”showSelect === 2″>
                <span v-if=”cityArr[proIndex].sub[cityIndex].sub.length” v-for=”n in cityArr[proIndex].sub[cityIndex].sub.length”
                 @click=”setOption(‘areaIndex’, $index)”>{{cityArr[proIndex].sub[cityIndex].sub[n].name}}</span>
            </span>
        </span>
    </div>
    <script src=”http://passport.baidu.com/js/sitedata_bas.js” charset=”GBK”></script>
    <script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js”></script>
    <script>
        var vm = new vue({
            el: ‘body’,
            data: {
                cityArr: arrCity,
                proIndex: 0,
                cityIndex: 0,
                areaIndex: 0,
                showSelect: ”
            },
            methods: {
                setOption: function (type, index) {
                    this[type] = index;
                    if (type === ‘proIndex’) {
                        this.cityIndex = 0;
                        this.areaIndex = 0;
                    }
                    if (type === ‘cityIndex’) {
                        this.areaIndex = 0;
                    }
                    this.showSelect = ”;
                },
                toggleSelect: function (n) {
                    if (this.showSelect === n) {
                        this.showSelect = ”;
                    } else {
                        this.showSelect = n;
                    }
                }
            }
        })
    </script>
</body>
</html>
前端小程序开发难吗
小程序开发前端后端配合
小程序开发 前端后端
赞(0)
前端开发者 » 前端开发用Vue.js来实现城市三级联动
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论