vue实现地区三级联动

最新推荐文章于 2023-10-24 14:23:02 发布

工地精神

最新推荐文章于 2023-10-24 14:23:02 发布

阅读量235

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/txyllyyj/article/details/121195314

版权

引入vue.js文件和v-distpicker.js文件

v-distpicker.js下载：v-distpicker.js-HTML5文档类资源-CSDN下载

<!DOCTYPE html>
<html>


<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/vue/vue-v2.6.10.js"></script>
    <script type="text/javascript" src="/js/v-distpicker.js"></script>
</head>

<body>

    <div id="app">
        <v-distpicker :province="distpicker.province" :city="distpicker.city" :area="distpicker.area" @selected="select" />
    </div>

</body>

<script>
    new Vue({
        //绑定视图
        el: "#app",
        //引用组件
        components: {
            VDistpicker
        },
        data: {
            distpicker: {
                province: '',
                city: '',
                area: '',
            },
        },
        methods: {
            //选择完地区后触发的事件
            select(data) {
                this.distpicker.province = data.province.value;
                this.distpicker.city = data.city.value;
                this.distpicker.area = data.area.value;
                console.log("地址:" + this.distpicker.province + this.distpicker.city + this.distpicker.area)
            },
        },
    })
</script>

</html>

效果：