Vue相关资料

Vue2中Store仓库    Vue中Store的使用示例 

JS中的Promise(如何使用promise异步操作)    Js中Promise 使用详解   

Element UI   Element-UI详细介绍   Element UI博客园

vue实现分页     Vue实例生命周期created和mounted的区别     Vue.js做表单验证   npm安装包的路径在哪里       vue.js在VS2017下的安装   

MVC+Vue.js实现联系人管理    JSON.parse和JSON.stringify详解    Vue.js 在MVC中如何使用Vue 组件    Vue在MVC中前后端的交互    

axios中文文档|axios中文网     vue 选城市三级联动   Vue如何防多次点击(重复)    Vue基础系列 Vue入坑第一篇    Vue脚手架默认访问的页面    

Vue的watch监听事件      vue前端菜单权限控制    vue实现调用手机拍照、录像功能    深入浅出npm命令详解与实践    windows使用nvm     

 

 

 

 

 

<div id="example">
    <select v-model="prov">
        <option v-for="option in arr" :value="option.name">
            {{ option.name }}
        </option>
    </select>
    <select v-model="city">
        <option v-for="option in cityArr" :value="option.name">
            {{ option.name }}
        </option>
    </select>
    <select v-model="district" v-if="district">
        <option v-for="option in districtArr" :value="option.name">
            {{ option.name }}
        </option>
    </select>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#example',
        data: {
            arr: arrAll,
            prov: '北京',
            city: '北京',
            district: '东城区',
            cityArr: [],
            districtArr: []
        },
        methods: {
            updateCity: function () {
                for (var i in this.arr) {
                    var obj = this.arr[i];
                    if (obj.name == this.prov) {
                        this.cityArr = obj.sub;
                        break;
                    }
                }
                this.city = this.cityArr[1].name;
            },
            updateDistrict: function () {
                for (var i in this.cityArr) {
                    var obj = this.cityArr[i];
                    if (obj.name == this.city) {
                        this.districtArr = obj.sub;
                        break;
                    }
                }
                if(this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name) {
                    this.district = this.districtArr[1].name;
                } else {
                    this.district = '';
                }
            }
        },
        beforeMount: function () {
            this.updateCity();
            this.updateDistrict();
        },
        watch: {
            prov: function () {
                this.updateCity();
                this.updateDistrict();
            },
            city: function () {
                this.updateDistrict();
            }
        }
    })
</script>