vue省市二级联动

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级联动</title>
</head>

<body>
    <div id="app">
        <pro-city></pro-city>
    </div>
    <template id="temp1">
        <div>
            <select name="" id="" @change="change" ref="pro"  v-model="proIndex">
                <option v-for="(item, index) in proData" :key="index" :value="index">{{item}}</option>
            </select>
            <select name="" id="" v-html="htmlStr"></select> 
        </div>
    </template>
</body>
<script src="/js/vue.min.js"></script>
<script>
    Vue.component("proCity", {
        template: "#temp1",
        /**
         * @name data 组件中的数据
         * @parameter proData 省级参数
         * @parameter cityData 市级参数
         * @parameter proIndex 使用v-model实时获取当前显示的option的value
         * @parameter doCity 为了获取cityData中的每一项
         * @parameter htmlStr 为了将拼接的字符串option放入到section中
        */
        data() {
            return {
                proData: ["-请选择省-","直辖市", "江苏省", "福建省", "广东省", "甘肃省"],
                cityData: [
                    ["-请选择省-"],
                    ["北京", "天津", "上海", "重庆"],
                    ["南京", "苏州", "南通", "常州"],
                    ["福州", "福安", "龙岩", "南平"],
                    ["广州", "潮阳", "潮州", "澄海"],
                    ["兰州", "白银", "定西", "敦煌"]
                ],
                proIndex: 0,  
                doCity: null,
                htmlStr: '<option value="" >-请选择市-</option>'
            }
        },
        methods: {
            /**
             * @name change 省级select改变市的事件
             * @description 当省级select改变时,市级数据进行添加渲染
            */
            change() {
            //每次选择将上次渲染的数据还原为初始值
                this.htmlStr = '<option value="" >-请选择市-</option>'
                doCity = this.cityData[this.proIndex]
                for (let item of doCity) {
                    this.htmlStr += '<option>'+item+'</option>'               
                }
            }
        }
    })

    new Vue({
        el: "#app"
    })
</script>

</html>
  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值