看省市区三级联动效果 -- 城市数据来自百度的 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>
来源: http://www.qdfuns.com/article/15309/d4e088dd33ec99fb8811202bb879065e.html