【代码】Vue完成下拉框的数据更改

2022-02-11 00:00:16 阅读：344 来源： 互联网

标签：city Vue 更改 demo resp axios data 下拉框数据模型

<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://mybatis.org/schema/mybatis-mapper" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入文件-->
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<!--设置id-->
<div id="app">
    <!--select中表单项标签绑定模型数据，并且绑定了事件，只要下拉表单被更改就执行事件-->
    <select id="selectCity" v-model="proid" v-on:change="change">
        <option disabled value="">请选择省份</option>
        <!--列表渲染，遍历了数据模型，并且给属性绑定了数据模型-->
        <!--{{}}插值表达式-->
        <option v-for="province in selectData" :value="province.id">{{province.province}}</option>
    </select>
    <select>
        <option disabled value="">请选择城市</option>
        <option v-for="citys in selectCity" >{{citys.city}}</option>
    </select>
</div>
<script>
    <!--创建vue核心对象-->
    new Vue({
        //关联id
        el: "#app",
        //定义数据模型
        data: {
            //定义数据
            selectData: [],
            proid: "",
            selectCity: []
        },
        //当前端加载完成执行
        mounted() {
            //发送请求
            axios({
                //设置请求方式
                method: "get",
                //设置请求资源路径
                url: "http://localhost:8080/city_demo/SelectServlet"
            //    回调函数
            }).then((resp) => {
                //将回调的数据赋值给数据模型
                this.selectData = resp.data
            });
        },
        //定义函数
        methods: {
            //创建函数
            change() {

                axios({
                    method: "post",
                    url: "http://localhost:8080/city_demo/SelectByIdServlet",
                    data: this.proid
                }).then((resp) => {
                    //将回调数据赋值给数据模型
                    this.selectCity = resp.data
                });
            }
        }
    });
</script>

</body>
</html>

标签：city,Vue,更改,demo,resp,axios,data,下拉框,数据模型
来源： https://blog.csdn.net/weixin_52226593/article/details/122871677

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【代码】Vue完成下拉框的数据更改