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

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

一、数据显示的前端页面

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

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

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

三、添加数据前端页面

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

四、添加数据js代码

需要注意的是:

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

页面展示

添加页面

数据添加

成功的数据显示

相关推荐
weixin_4435669818 小时前
天学网面试 —— 中级前端开发岗位
vue
YGY Webgis糕手之路1 天前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
aiguangyuan1 天前
前端开发 Vue 组件优化
系统架构·vue·前端开发
YGY Webgis糕手之路1 天前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
pengzhuofan1 天前
Web开发系列-第13章 Vue3 + ElementPlus
前端·elementui·vue·web
伍哥的传说3 天前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
aiguangyuan4 天前
前端开发性能优化概要
系统架构·vue·react·前端开发
不老刘4 天前
Claude Code 基于 VUE + KonvaJS 实现海报生成器(附源码)
vue·claude·konvajs
今天不要写bug5 天前
js原生实现搜索框下拉列表输入框模糊匹配高亮
javascript·vue·ecmascript
weixin_422201305 天前
uniapp自定义圆形勾选框和全选框
javascript·uni-app·vue·自定义·checkbox