[vue]三级联动

1.进入页面默认城市
2.改变省的时候市和区改变，改变市的时候，区改变

<template lang="pug">
    div
        select(v-model="prov")
            option(v-for="option in arr" :value="option.name") {{option.name}}
        select(v-model="city")
            option(v-for="option in cityArr" :value="option.name") {{option.name}}
        select(v-model="country")
            option(v-for="option in countryArr" :value="option.name") {{option.name}}
</template>

👆用的pug(jade)模板引擎，省着每次按Tab键（这个模板引擎是最慢的，大家都不建议用，但看的舒服）

module.exports = {
    province:[
        {name:'湖北',
            city:[
                {name:"武汉",
                    country:[
                        {name:'汉中区'},
                        {name:'江汉区'},
                    ]
                },
                {name:"襄阳",
                    country:[
                        {name:'樊城区'},
                        {name:'襄城区'},
                    ]
                },
            ]
        },
        {name:'江苏',
            city:[
                {name:"南京",
                    country:[
                        {name:'玄武区'},
                        {name:'白下区'},
                    ]
                },
                {name:"苏州",
                    country:[
                        {name:'沧浪区'},
                        {name:'平江区'},
                    ]
                },
            ]
        },
    ]
}

👆随便写的json数据，不论用jquery还是vue，这种结构还是比较通用的

import province from './city/province'

export default {
    data(){
        return{//做select的默认值，以及双向绑定
            prov: '湖北',//第一次进入，updateCity()需要调用，为<省-默认值>
            city: '',//调用updateCity()后，会改变city和country的值
            country: '',//所以，这两个值输入也没用
            arr: [], //option的数据
            cityArr: [],
            countryArr: []
        }
    },
    mounted(){
        this.updateCity()
    },
    methods:{
        updateCity: function () { 
            this.arr = province.province //获取城市的数据
            for (var i in this.arr) {//遍历所有的省
                var obj = this.arr[i];
                if (obj.name == this.prov) {//当选择一个省时
                    this.cityArr = obj.city;//将这个省下的市数据注入
                    break;
                }
            }
            this.city = this.cityArr[1].name;//这里可以设置<市-默认值>
        },
        updateCountry: function () {
            for (var i in this.cityArr) {
                var obj = this.cityArr[i];
                if (obj.name == this.city) {
                    this.countryArr = obj.country;
                    break;
                }
            }
            this.country = this.countryArr[0].name;//设置<区-默认值>
        }

    },
    watch: {
        prov: function () {//当省改变时，改变城市和区
            this.updateCity(),
            this.updateCountry()
        },
        city:function () {//当市改变的时候，改变区
            this.updateCountry()
        }
    }
}

👆

开始使用根据网上教程使用jquery实现3级联动菜单，确实十分麻烦，获取3个id，绑定事件，生成字符串。使用vue就简单多了