数据格式为：

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四级联动</title>
    <script src="../vue3.js"></script>
    <script src="./cityJson.js"></script>
</head>

<body>
    <div id="root">
        <h1>你选择了--{{sheng}}--{{shi}}--{{qu}}--{{street}}</h1>
        <select @change="shengChange" v-model="sheng">
            <option value="">--请选择省--</option>
            <option v-for="(p,key) in shengList" :value="key" :key="key">{{key}}</option>
        </select>
        <select v-model="shi" @change="shiChange">
            <option value="">--请选择市--</option>
            <option v-for="(c,key) in shiList" :value="key" :key="key">{{key}}</option>
        </select>
        <select v-model="qu" @change="quChange">
            <option value="">--请选择区--</option>
            <option v-for="(q,key) in quList" :value="key" :key="key">{{key}}</option>
        </select>
        <select v-model="street">
            <option value="">--请选择街道--</option>
            <option v-for="v in streetList" :value="v" :key="v">{{v}}</option>
        </select>

    </div>
    <script>
        const app = Vue.createApp({
            el: "#root",
            data() {
                return {
                    shengList: cityJson,
                    shiList: {},
                    quList: {},
                    streetList: [],
                    sheng: '',
                    shi: '',
                    qu: '',
                    street: ''

                }
            },
            methods: {
                shengChange() {
                    this.shiList = this.shengList[this.sheng]
                    // 清空
                    this.shi = "";
                    this.street = "";
                    this.qu = "";
                    this.quList = {};
                    this.streetList = []
                },
                shiChange() {
                    this.quList = this.shiList[this.shi];
                    this.streetList = [];
                    this.qu = ''
                    this.street = ''
                },
                quChange() {
                    this.streetList = this.quList[this.qu]
                    this.street = ''
                }
            },
        });
        app.mount('#root')
    </script>
</body>

</html>
结果为：

 

 

 

原文地址：http://www.cnblogs.com/maxiaopi/p/16852594.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性