vue3完整Demo(数据绑定,数据显示,数据修改,数据提交)

需要引入的的依赖:jquery(用于异步请求)

一、数据显示的前端页面

条件查询数据并显示,下拉框使用的model双向绑定

二、js代码(list页面的数据请求)

后端传来的时间数据需要转换可以使用new Intl.DateTimeFormat('zh-CN', options);转换一下

三、添加数据前端页面

input标签使用model属性进行绑定,提交时才可以把数据给后端进行处理

四、添加数据js代码

需要注意的是:

如果和我一样使用的组合式API风格就需要再调用变量时加上.value ,不然无法调用值

页面展示

添加页面

数据添加

成功的数据显示

相关推荐
小葛要努力2 天前
安装nvm 管理node.js版本实现vue2和vue3项目共存
node.js·vue·nvm
这里是杨杨吖3 天前
SpringBoot+Vue高校在线考试系统 附带详细运行指导视频
vue·在线考试·springboot
wuxia21183 天前
在5种环境中编写点击元素改变内容和颜色的JavaScript程序
javascript·微信小程序·vue·jquery·react
Sweet锦3 天前
Vue3 集成 ApexCharts 避坑指南:从动画失效到自定义指令的完美解决方案
vue·echarts
王小王-1234 天前
基于深度学习的个性化音乐推荐系统的设计与开发
人工智能·深度学习·mysql·vue·推荐算法·个性化音乐推荐系统·音乐预测
alexander0684 天前
使用vite脚手架,快速创建一个vue3的项目
vue
toooooop86 天前
UniApp Vue2 动态修改 SCSS 伪类颜色
vue
这是个栗子6 天前
微信小程序开发(九)- uni-app微信小程序商城
微信小程序·小程序·uni-app·vue·vuex
鹤鸣的日常7 天前
前端运行时动态环境变量方案
前端·react.js·docker·前端框架·vue·gitlab
来杯@Java8 天前
学生选课管理系统(基于springboot+vue前后端分离的项目)计算机毕业设计java
java·spring boot·spring·vue·毕业设计·maven·mybatis