当前位置: 首页 > news >正文

表单提交是

首先,确保你已经安装了Vue 3、Element UI和axios(用于发送HTTP请求)。你可以使用以下命令进行安装:

 

bash复制代码

npm install vue@next element-ui axios --save

 


<template>  <el-form :model="form" :rules="rules" ref="form" label-width="120px">  <el-form-item label="姓名" prop="name">  <el-input v-model="form.name"></el-input>  </el-form-item>  <el-form-item label="年龄" prop="age">  <el-input v-model="form.age"></el-input>  </el-form-item>  <el-form-item label="住址" prop="address">  <el-input v-model="form.address"></el-input>  </el-form-item>  <el-form-item label="电话" prop="phone">  <el-input v-model="form.phone"></el-input>  </el-form-item>  <el-form-item>  <el-button type="primary" @click="submitForm('form')">提交</el-button>  </el-form-item>  </el-form>  </template><script>  
export default {  data() {  return {  form: {  name: '',  age: '',  address: '',  phone: ''  },  rules: {  name: [  { required: true, message: '请输入姓名', trigger: 'blur' },  { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }  ],  age: [  { required: true, message: '请输入年龄', trigger: 'blur' },  { min: 18, max: 100, message: '年龄在 18 到 100 岁之间', trigger: 'blur' }  ],  address: [  { required: true, message: '请输入住址', trigger: 'blur' },  { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }  ],  phone: [  { required: true, message: '请输入电话号码', trigger: 'blur' },  { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur' }  ]  },  apiUrl: 'https://example.com/api/submit' // 后端接口的URL  };  },  methods: {  submitForm(formName) {  this.$refs[formName].validate((valid) => {  if (valid) {  // 表单验证通过,提交表单数据到后端接口  axios.post(this.apiUrl, this.form)  .then((response) => {  // 后端接口返回成功处理逻辑...  console.log('提交成功');  })  .catch((error) => {  // 后端接口返回失败处理逻辑...  console.log('提交失败');  });  } else {  // 表单验证失败,显示错误信息...  console.log('表单验证失败');  return false;  }  });}
}
}</script>  

本地存储

<template><div><h1>Task List</h1><input v-model="newTask" @keyup.enter="addTask" placeholder="Add a new task" /><button @click="removeTask">Delete</button></div></template><script>export default {data() {return {newTask: '',};},methods: {removeTask(index) {console.log(this.newTask,'asadsad')this.tasks.splice(index, 1);// 更新LocalStorage中的任务列表localStorage.setItem('tasks', JSON.stringify(this.newTask));}}};</script>

 

vue本地存储_vue 本地存储-CSDN博客 

相关文章:

表单提交是

首先&#xff0c;确保你已经安装了Vue 3、Element UI和axios&#xff08;用于发送HTTP请求&#xff09;。你可以使用以下命令进行安装&#xff1a; bash复制代码 npm install vuenext element-ui axios --save <template> <el-form :model"form" :rules&q…...

Qt的委托代理机制

委托是Qt中的一种机制&#xff0c;用于在Qt模型/视图架构中处理特定类型的数据。委托提供了一种方便的方法来定制特定类型的数据的显示和编辑。委托可以做以下事情: 编辑特定类型的数据: 通过创建编辑器来编辑特定类型的数据,例如日期,数值等。 渲染特定类型的数据: 通过定制单…...

OpenCV入门5——OpenCV的算术与位运算

文章目录 图像的加法运算图像的减法运算图像的乘除运算图像的融合OpenCV位运算-非操作OpenCV位操作-与运算OpenCV位操作-或与异或为图像添加水印 图像的加法运算 # -*- coding: utf-8 -*- import cv2 import numpy as npimg cv2.imread(E://pic//4.jpg)# 图的加法运算就是矩阵…...

好用的开源项目地址

Sword: SpringBlade前端UI项目&#xff0c;基于react 、ant design、dva、umi&#xff0c;用于快速构建系统中后台业务。 官网&#xff1a;https://bladex.cn Saber: SpringBlade前端UI项目&#xff0c;对现有的avue2.0、element-ui库进行二次封装。基于json驱动的模块配置&am…...

深度学习(五)softmax 回归之:分类算法介绍,如何加载 Fashion-MINIST 数据集

Softmax 回归 基本原理 回归和分类&#xff0c;是两种深度学习常用方法。回归是对连续的预测&#xff08;比如我预测根据过去开奖列表下次双色球号&#xff09;&#xff0c;分类是预测离散的类别&#xff08;手写语音识别&#xff0c;图片识别&#xff09;。 现在我们已经对回…...

单稳态中间继电器\UEG/A-2H/220V 8A导轨安装 JOSEF约瑟

UEG系列中间继电器 UEG/A-2H2D中间继电器UEG/A-4H4D中间继电器UEG/A-2D中间继电器 UEG/A-2H中间继电器UEG/A-4H中间继电器UEG/A-4D中间继电器 UEG/A-6H中间继电器UEG/A-6D中间继电器UEG/A-8H中间继电器 UEG/A-10D中间继电器UEG/A-10H中间继电器UEG/A-2DPDT中间继电器 UEG/A-4DP…...

2311rust到20版本更新

Rust1.9 Rust1.9中最大的变化是稳定了包括停止恐慌启动的展开过程方法的std::panic模块: use std::panic; let result panic::catch_unwind(|| {println!("hello!"); }); assert!(result.is_ok()); let result panic::catch_unwind(|| {panic!("oh no!"…...

基于Spring、SpringMVC、MyBatis的漫画网站

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于Spring、SpringMVC、MyBatis的漫画网…...

MySQL数据库八股文

MySQL数据库八股文 第一章 数据库基础 1. 数据库概念 数据库是存储数据的仓库&#xff0c;数据库管理系统是操纵和管理数据库的大型软件&#xff08;如MySQL&#xff0c;InnoDB是其默认的存储引擎&#xff09;&#xff0c;SQL是操作关系型数据库的编程语言。 2. SQL语法与分…...

利用WebSocket +MQ发送紧急订单消息,并在客户端收到消息的用户的页面自动刷新列表

背景&#xff1a;在原有通知公告的基础上&#xff0c;把通知公共的推送服务修改为其他业务收到紧急订单发送公告到消息队列MQ&#xff0c;然后在js中创建一个socket去监听公告&#xff0c;收到公告后刷新所有在订单页面的用户的页面列表&#xff08;重点就是用户在收到紧急订单…...

R语言——taxize(第一部分)

ropensci 系列之 taxize &#xff08;中译手册&#xff09; taxize 包1. taxize支持的网络数据源简介目前支持的API&#xff1a;针对Catalogue of Life&#xff08;COL&#xff09; 2. 浅尝 taxize 的一些使用例子2.1. **从NCBI上获取唯一的分类标识符**2.2. **获取分类信息**2…...

【Spring Cloud】黑马头条 用户服务创建、登录功能实现

点击去看上一篇 一、创建用户 model 1.创建用户数据库库 leadnews_user 核心表 ap_user 建库建表语句 这里一定要使用 navicat&#xff0c;执行SQL 文件&#xff0c;以防止 cmd 中的编码问题 先将 SQL 语句&#xff0c;保存在电脑中&#xff0c;再使用 navicat 打开 CREATE…...

聚观早报 |英伟达发布H200;夸克发布自研大模型

【聚观365】11月15日消息 英伟达发布H200 夸克发布自研大模型 iQOO 12系列开启销售 红魔9 Pro配置细节 禾赛科技第三季度营收4.5亿元 英伟达发布H200 全球市值最高的芯片制造商英伟达公司&#xff0c;正在升级其H100人工智能处理器&#xff0c;为这款产品增加更多功能&am…...

15项基本SCADA技术技能

1. 人机界面 人机界面是将操作员连接到设备、系统或机器的仪表板或用户界面。 以下是 hmi 在 scada 技术人员简历中的使用方式&#xff1a; 完成了查尔斯湖废水处理厂和提升站的完整 HMI 图形界面。对加油系统、加油车、PLC、HMI、触摸屏进行故障排除和维修。对 Horner HMI …...

Golang 发送邮件

Go 有内置好的本地库可以发送邮件&#xff0c;在 GitHub 上也有别人写好的第三方包可以发送邮件。 本文将分别介绍一下这两种发送邮件的方式。 1、内置的net/smtp 为了更好的模拟发送邮件&#xff0c;推荐一个邮件测试工具&#xff1a;MailHog&#xff0c;MailHog 是面向开发…...

【ARM Trace32(劳特巴赫) 使用介绍 5-- Trace32 通过 JTAG 命令获取数据寄存器 IDCODE的值】

请阅读【ARM Coresight SoC-400/SoC-600 专栏导读】 文章目录 Trace JTAG Command LineTrace32 JTAG 数据发送命令Trace32 JTAG 数据接收命令Trace32 数据访问修饰符Trace32 IDCODE 脚本实例Trace32 APITrace JTAG Command Line Trace32 JTAG 数据发送命令 JTAG.SHIFTTMS <…...

Python之while/for,continue/break

定义一个随机数&#xff1a; import random numrandom.randint(1,10) while循环&#xff1a; while 条件(): 条件满足时&#xff0c;做的事情1 条件满足时&#xff0c;做的事情2 ...... for循环&#xff1a; for 变量 in range(10): 循环需要执行的代码 else: 循环结束时&…...

卷积神经网络(CNN)衣服图像分类的实现

文章目录 前期工作1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#xff09;我的环境&#xff1a; 2. 导入数据3.归一化4.调整图片格式5. 可视化 二、构建CNN网络模型三、编译模型四、训练模型五、预测六、模型评估 前期工作 1. 设置GPU&#xff08;如果使用的是CPU可以…...

odoo16前端框架源码阅读——env.js

env.js&#xff08;env的初始化以及服务的加载&#xff09; 路径&#xff1a;addons\web\static\src\env.js 这个文件的作用就是初始化env&#xff0c;主要是加载所有的服务。如orm, title, dialog等。 1、env.js 的加载时机 前文我们讲过前端的启动函数&#xff0c;start.…...

浙大恩特客户资源管理系统 SQL注入漏洞复现

0x01 产品简介 浙大恩特客户资源管理系统是一款针对企业客户资源管理的软件产品。该系统旨在帮助企业高效地管理和利用客户资源&#xff0c;提升销售和市场营销的效果。 0x02 漏洞概述 浙大恩特客户资源管理系统中T0140_editAction.entweb接口处存在SQL注入漏洞&#xff0c;未…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...