当前位置: 首页 > 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;未…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...