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)、基本用法…

【牛客算法】某司面试算法题:找出最长山脉的长度

文章目录 一、题目1.1 题目描述1.2 示例11.2 示例21.3 提供的代码 二、如何完成这个算法题?2.1 解题思路解释复杂度 一、题目 1.1 题目描述 给定一个长度为 n 的正整数数组,每个元素表示一座山的高度。 其中满足以下条件的连续子数组称为山脉&#xf…

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.…

C++二级题 计算好数:1数大于0数(二进制的位运算)

1、题目 若将一个正整数化为二进制数,在此二进制数中,我们将数字1的个数多于数字0的个数的这类二进制数称为好数。 例如: (13)10 (1101)2,其中1的个数为3,0的个数为1,则此数是好数; (10)10 (1…

Nginx upstream

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

【数学二】常微分方程-一阶微分方程

考试要求 1、了解微分方程及其阶、解、通解、初始条件和特解等概念. 2、掌握变量可分离的微分方程及一-阶线性微分方程的解法,会解齐次微分方程. 3、会用降阶法解下列形式的微分方程: y ( n ) f ( x ) , y ′ ′ f ( x , y ′ ) y^{(n)}f(x),y^{}f(x,y^{}) y(n)f(x),y′′f(…

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

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

git restore恢复删除文件

新版本 在 Git 2.23 版本之后,Git 引入了一个新的命令 git restore,用于简化文件恢复操作。可以用 git restore 来恢复误删除的文件。下面是详细的使用方法: 1. 恢复工作区中删除的文件(未提交) 如果文件已被删除&a…

对角双差速轮AGV平移、直行、转弯、原地旋转案例

在对角两对双差速轮 AGV(自动导引车)中,车辆配置了两对差速轮,分别安装在左前(Front Left,FL)和右后(Rear Right,RR)。这种配置使得 AGV 具有较高的机动性,可以实现平移、直行、转弯和原地旋转等复杂运动 2. 运动学模型 2.1 定义变量 车辆参数: r:车轮半径(米…

flask服务通过gunicorn启动

使用 Gunicorn 启动 Flask 服务通常可以提升 Flask 应用的性能。以下是通过 Gunicorn 启动 Flask 服务的步骤: 1. 安装依赖 首先,确保已安装 Flask 和 Gunicorn: pip install flask gunicorn2. 创建 Flask 应用 创建一个简单的 Flask 应用…

IPV6扩展头部

IPv6扩展头部(Extension Header)是一种用于在IPv6数据包中添加额外信息和功能的结构。与IPv4相比,IPv6的头部设计简化了基本头部,使其更灵活。扩展头部用于提供各种功能,如路由、分片、流量控制等。扩展头部的使用使得…

安全知识见闻-网络安全热门证书

一、OSCP(Offensive Security Certified Professional) 1. 证书介绍 2.考点 3.部分考试要求 4.练习方法 二、OSEP(Offensive Security Exploit Developer) 1.证书介绍 2.考点 3.练习方法 三、CISSP(Certified lnformation Systems Security Professional&a…

技术成神之路:二十三种设计模式(导航页)

设计原则/模式链接面向对象的六大设计原则技术成神之路:面向对象的六大设计原则创建型模式单例模式建造者模式原型模式工厂方法模式抽象工厂模式行为型模式策略模式状态模式责任链模式观察者模式备忘录模式迭代器模式模板方法模式访问者模式中介者模式命令模式解释器…

【已解决,含泪总结】非root权限在服务器上配置python和torch环境,代码最终成功训练(一)

配置Python环境 没有root权限服务器上有多个python环境但没有自己想要的怎么办 之前跑别的实验的时候改过指定的python3.7版本,但是居然我过了一段时间之后,再次打开,python版本居然又回到2.7(服务器/usr/下的默认python版本&am…

什么是AI神经网络?

文章目录 神经网络的基本概念如何工作?训练过程应用实例未来展望推荐阅读文章 在当今的科技时代,人工智能(AI)已经深入到我们生活的各个方面,而神经网络则是推动这一发展的重要技术之一。无论是在图像识别、自然语言处…

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

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