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

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

一、数据显示的前端页面

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

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

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

三、添加数据前端页面

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

四、添加数据js代码

需要注意的是:

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

页面展示

添加页面

数据添加

成功的数据显示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/58170.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue3 学习笔记(七)Vue3 语法-计算属性 computed详解

#1024程序员节|征文# 1、计算属性 computed 在 Vue.js 中,计算属性(computed properties)是一种特殊的响应式属性,它们根据依赖的响应式数据自动更新。计算属性非常适合用于当你需要根据现有数据派生出一些状态时。 (1)、基本用法…

LLM | 论文精读 | NeurIPS 2023 | SWIFTSAGE: 结合快思考与慢思考的生成智能体

论文标题:SWIFTSAGE: A Generative Agent with Fast and Slow Thinking for Complex Interactive Tasks 作者:Bill Yuchen Lin, Yicheng Fu, Karina Yang, Faeze Brahman, Shiyu Huang, Chandra Bhagavatula, Prithviraj Ammanabrolu, Yejin Choi, Xian…

【Vue3】第二篇

Vue3学习第二篇 01. 事件处理02. 事件传参03. 事件修饰符04. 数组变化侦测05. 计算属性06. class绑定07. style绑定08. 侦听器09. 表单输入绑定10. 模板引用 01. 事件处理 在vue当中的事件处理和html、css中的不一样,它单独做了处理。 注意:用法中只是用…

【Android】浅析OkHttp(1)

【Android】浅析OkHttp(1) OkHttp 是一个高效、轻量级的 HTTP 客户端库,主要用于 Android 和 Java 应用开发。它不仅支持同步和异步的 HTTP 请求,还支持许多高级功能,如连接池、透明的 GZIP 压缩、响应缓存、WebSocke…

JUC并发编程面试题总结

文章目录 1、创建线程的三种方式2、线程的状态3、线程的上下文切换4、run和start的区别5、sleep和wait区别6、虚假唤醒,精确唤醒7、两阶段终止模式8、多线程下的线程安全问题9、如何解决线程安全问题10、synchornized的原理11、锁升级的机制12、锁消除13、批量重偏向…

Unity编辑器制作多级下拉菜单

Unity编辑器下拉菜单 大家好,我是阿赵。   在Unity引擎里面编写工具插件,有时候会用到一些特殊的菜单形式,比如下拉选项。 通过下拉菜单,给用户选择不同的选项。   如果只是一层的下拉列表,可以用EditorGUILayout.…

Nginx upstream

什么是Nginx upstream? Nginx 模块一般分为三大类:handler、filter和upstream。 利用 handler、filter 这两个模块,可以使 Nginx 轻松完成任何单机工作。 upstream 模块将使 Nginx 跨越单机的限制,完成网络数据的接收、处理和转…

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-23

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-23 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-23目录1. Advancements in Visual Language Models for Remote Sensing: Datasets, Capabilities, and Enhancement Techniques摘…

Zig 语言通用代码生成器:逻辑,冒烟测试版发布二

Zig 语言通用代码生成器:逻辑,冒烟测试版发布二 Zig 语言是一种新的系统编程语言,其生态位类同与 C,是前一段时间大热的 rust 语言的竞品。它某种意义上的确非常像 rust,尤其是在开发过程中无穷无尽抛错的过程&#x…

高等数学-宋浩版2.0-映射

映射:X,Y为非空集合,存在法则F,对X(原像)中每个元素X,按法则F,在Y中有唯一元素与之对应,F为x到Y(镜像)的映射。f:X->Y X原像,Y像,x定义域,Df,Rf &#x…

python之多任务爬虫——线程、进程、协程的介绍与使用(16)

文章目录 1、什么是多任务?1.1 进程和线程的概念1.2 多线程与多进程的区别1.3 并发和并行2、python中的全局解释器锁3、多线程执行机制4、python中实现多线程(threading模块)4.1 模块介绍4.2 模块的使用5、python实现多进行程(Multiprocessing模块)5.1 导入模块5.2 模块的…

Caffeine本地缓存框架

Caffeine本地缓存框架 hi,我是阿昌,今天记录一下Java最强本地缓存Caffeine 1、缓存介绍 缓存(Cache),在软件无处不在。从底层CPU多级缓存,再到客户页面缓存,和服务器数据缓存,导出都存在着缓存的身影&am…

HBuilder X 中Vue.js基础使用2(三)

一、条件渲染 1、条件判断 v-if : 表达式返回真值时才被渲染 v-else :表达式返回为假时不被渲染 2、 分支条件判断 v-else-if :使用v-if , v-else-if 和 v-else 来表示其他的条件分支 3、显示隐藏 v-show v-show true 把节点显示 …

PortQry下载安装使用教程(超详细),Windows测试UDP端口

《网络安全自学教程》 PortQry是微软官方提供的一款TCP/IP连接「排障工具」,用来「检查」TCP/UDP「端口状态」。 平时检查端口状态,最常用的是telnet,但它是基于TCP协议的,无法检测「UDP端口」,这篇文章教大家如何在W…

Axure随机验证码高级交互

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢! 课程主题:字母数字随机验证码高级交互 主要内容:4位字母数字随机验证码生成、错误提示与State状态同步 应用场景:登录验证码、其他类…

面试宝典(五):用三个线程按顺序循环打印123三个数字,比如123123123

要使用三个线程按顺序循环打印123三个数字,势必要控制线程的执行顺序,可以使用java.util.concurrent包中的Semaphore类来控制线程的执行顺序。 代码示例 import java.util.concurrent.Semaphore;public class SequentialPrinting123 {private static Se…

leetcode:34. 在排序数组中查找元素的第一个和最后一个位置(python3解法)

#1024程序员节 | 征文# 难度:中等 给你一个按照非递减顺序排列的整数数组 nums,和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target,返回 [-1, -1]。 你必须设计并实现时间复杂度为 O(lo…

初识算法 · 前缀和(1)

目录 前言: 一维数组的前缀和 题目解析 算法原理 算法编写 二维数组的前缀和 题目解析 算法原理 算法编写 前言: ​本文的主题是前缀和,通过两道题目讲解,一道是一维数组的模板,一道是二维数组的模板。 链接…

【WebGIS实例】(18)MapboxGL 绘制矢量——线、面

前言 Mapbox GL JS 版本:3.6.0 该博客仅供学习参考,如果您是计划在实际项目中实现该功能,也推荐您直接使用已有的功能库: 官方案例:Draw a polygon and calculate its areamapbox-gl-draw:mapbox/mapbox-g…

基于Django+python的酒店客房入侵检测系统设计与实现

项目运行 需要先安装Python的相关依赖:pymysql,Django3.2.8,pillow 使用pip install 安装 第一步:创建数据库 第二步:执行SQL语句,.sql文件,运行该文件中的SQL语句 第三步:修改源…