【代码】Vue完成下拉框的数据更改
2022/2/11 6:15:15
本文主要是介绍【代码】Vue完成下拉框的数据更改,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!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>
这篇关于【代码】Vue完成下拉框的数据更改的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set