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

2023-10-12 11:38:40
<!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>
码农公寓

相关文章
