用vue3实现留言板功能

效果图:

代码:

<script setup lang="ts">
import { ref } from 'vue';interface Message {name: string;phone: string;message: string;
}const name = ref<string>('');
const phone = ref<string>('');
const message = ref<string>('');
const messages = ref<Message[]>([]);const submitMessage = () => {if (name.value && phone.value && message.value) {const phoneRegex = /^1[0123456789]\d{9}$/;if (!phoneRegex.test(phone.value)) {alert('请输入正确的手机号!');return;}messages.value.unshift({name: name.value,phone: phone.value,message: message.value});name.value = '';phone.value = '';message.value = '';} else {alert('请填写完整的信息!');}
};const deleteMessage = (index: number) => {messages.value.splice(index, 1);
};const editMessage = (index: number) => {const editedMessage = prompt('请输入编辑后的留言内容:', messages.value[index].message);if (editedMessage !== null) {messages.value[index].message = editedMessage;}
};
</script><template><div id="app"><h1>留言板</h1><div class="message-form"><label for="name">留言者姓名:</label><input type="text" v-model="name" placeholder="留言者姓名"><label for="phone">手机号:</label><input type="text" v-model="phone" placeholder="手机号"><label for="message">留言内容:</label><textarea v-model="message" placeholder="留言内容"></textarea><button @click="submitMessage">提交</button></div><div class="message-list" v-if="messages.length > 0"><div v-for="(msg, index) in messages" :key="index" class="message"><div>留言者姓名:{{ msg.name }}</div><div>手机号:{{ msg.phone }}</div><div>留言内容:{{ msg.message }}</div><button @click="deleteMessage(index)">删除</button><button @click="editMessage(index)">编辑</button></div></div></div>
</template><style scoped>
#app {max-width: 600px;margin: 0 auto;padding: 20px;font-family: 'Roboto', sans-serif;
}h1 {text-align: center;margin-bottom: 20px;color: #3498db;
}.message-form {display: flex;flex-direction: column;align-items: flex-start;margin-bottom: 20px;
}
.message-form label {width: 100%; margin-bottom: 10px;
}.message-form input,
.message-form textarea {width: 100%;padding: 10px;margin-bottom: 15px;border: 1px solid #ddd;border-radius: 5px;font-size: 14px;
}.message-form button {padding: 10px 20px;background-color: #3498db;color: white;border: none;border-radius: 5px;cursor: pointer;font-size: 14px;transition: all 0.3s ease;display: block;margin: 0 auto;
}.message-form button:hover {background-color: #2980b9;
}
.message-list {margin-top: 20px;
}.message {background-color: #eef5f9;border-left: 4px solid #007bff;padding: 15px;margin-bottom: 10px;border-radius: 4px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}.message button {background-color: transparent;color: #007bff;border: 1px solid #007bff;margin-right: 10px;margin-top: 10px;transition: background-color 0.3s ease, color 0.3s ease;
}.message button:hover {background-color: #007bff;color: white;
}
</style>

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

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

相关文章

Llama 3 安装使用方法

Llama3简介&#xff1a; llama3是一种自回归语言模型&#xff0c;采用了transformer架构&#xff0c;目前开源了8b和70b参数的预训练和指令微调模型&#xff0c;400b正在训练中&#xff0c;性能非常强悍&#xff0c;并且在15万亿个标记的公开数据进行了预训练&#xff0c;比ll…

python——井字棋游戏——登入注册界面

本篇文章只讲解登入和注册页面&#xff0c;在后面的文章中会讲解井字棋游戏&#xff0c;然后把井字棋和登入界面进行连接&#xff0c;整合成一个完整的游戏。 登入注册界面在本篇文章的末尾。 1.实现登入界面 &#xff08;1&#xff09;导入图片 把这张图片存储在与代码路径…

Rundeck(四)安全配置

自动化运维工具rundeck GitHub - rundeck 是java开发的开源自动化服务&#xff0c;具有 Web 控制台、命令行工具和 WebAPI。它使您可以轻松地跨一组节点运行自动化任务&#xff0c;适合运维自动化管理、自动发布管理、运维数据分析等 网站&#xff1a;https://www.rundeck.co…

人人开源框架运行

Getting started renrenio/renren-fast-vue Wiki GitHub 人人开源 1.启动navicat&#xff1a;新建一个数据库renren-fast&#xff0c;字符集为utf-8,utf-8mb3或者utf-8mb4&#xff0c;排序规则不选 2.数据库操作在renren-fast数据库中选择表&#xff0c;运行renren-fast-ma…

LeetCode 每日一题 ---- 【1017.负二进制转换】

LeetCode 每日一题 ---- 【1017.负二进制转换】 1017.负二进制转换方法一&#xff1a;模拟进制转换推广&#xff1a;任意进制转换 1017.负二进制转换 方法一&#xff1a;模拟进制转换 我们平常做进制转换最常用的方法就是辗转相除法&#xff0c;下面的图示分别给出了普通的10…

web自动化测试详细流程和步骤

一、什么是web自动化测试 自动化&#xff08;Automation&#xff09;是指机器设备、系统或过程&#xff08;生产、管理过程&#xff09;在没有人或较少人的直接参与下&#xff0c;按照人的要求&#xff0c;经过自动检测、信息处理、分析判断、操纵控制&#xff0c;实现预期的目…

卷积注意力模块 CBAM | CBAM: Convolutional Block Attention Module

论文名称&#xff1a;《CBAM: Convolutional Block Attention Module》 论文地址&#xff1a;https://arxiv.org/pdf/1807.06521.pdf 我们提出了卷积块注意力模块&#xff08;CBAM&#xff09;&#xff0c;这是一种简单但有效的前馈卷积神经网络注意力模块。给定一个中间特征图…

transformer上手(10)—— 文本摘要任务

文本摘要是一个 Seq2Seq 任务&#xff0c;尽可能保留文本语义的情况下将长文本压缩为短文本。 文本摘要可以看作是将长文本“翻译”为捕获关键信息的短文本&#xff0c;因此大部分文本摘要模型同样采用 Encoder-Decoder 框架。当然&#xff0c;也有一些非 Encoder-Decoder 框架…

prompt提示词:AI英语词典,让AI教你学英语,通过AI实现一个网易有道英语词典

目录 英语词典提问技巧效果图&#xff1a;提示词&#xff1a; 英语词典提问技巧 随着AI工具的出现&#xff0c;学英语也可以变得很简单&#xff0c;大家可以直接通过AI 来帮助自己&#xff0c;提高记忆单词的效率&#xff0c;都可以不需要网易有道词典了&#xff0c;今天我教大…

分布式ID之雪花算法

1. Seata对雪花算法生成ID的改良 滑动验证页面 &#xff08;含代码&讲解&#xff09; Seata基于改良版雪花算法的分布式UUID生成器分析&#xff1a;时间戳和节点ID位置进行了调换。官网&#xff1a;Seata基于改良版雪花算法的分布式UUID生成器分析 | Apache Seata关于新版…

Asp .Net Core 系列:国际化多语言配置

文章目录 概述术语 本地化器IStringLocalizer在服务类中使用本地化 IStringLocalizerFactoryIHtmlLocalizerIViewLocalizer 资源文件区域性回退 配置 CultureProvider内置的 RequestCultureProvider实现自定义 RequestCultureProvider使用 Json 资源文件 设计原理IStringLocali…

第二证券|股息分红和送股哪个好?

在股票投资中&#xff0c;股息分红和分红送股是两种常见的股票分红方法。关于股息分红和送股哪个好&#xff0c;第二证券下面就为我们具体介绍一下。 股息分红和送股哪个好并没有一个绝对的答案&#xff0c;它们只是上市公司向股东分配利润的不同方法。股息分红的好处是投资者…

武汉星起航:挂牌上海股权中心,开启资本新篇章助力跨境电商飞跃

2023年10月30日&#xff0c;武汉星起航电子商务有限公司在上海股权托管交易中心成功挂牌展示&#xff0c;标志着这家在跨境电商领域拥有卓越声誉的企业正式迈入了资本市场的大门。对于武汉星起航来说&#xff0c;这不仅是其发展历程中的一个重要里程碑&#xff0c;更是对其业务…

STM32-TIM定时器与PWM输出

学习目标&#xff1a; 1. 熟练掌握 TIM 的参数配置。 2. 掌握通道的参数配置。 3. 深刻理解 PWM 与功率的关系。 4. 理解 PWM 的原理示意。 一 什么是 PWM 输出 PWM &#xff08; pulse width modulation &#xff09;一种脉冲宽度调节技术。 PWM 的效果是什么样子&#xf…

AOMEI Partition Assistant傲梅分区助手技术员版:专业级的硬盘分区利器

在数字化时代&#xff0c;数据存储和管理变得愈发重要。对于电脑技术员而言&#xff0c;一款功能强大、操作简便的分区工具无疑是提高工作效率的得力助手。而傲梅分区助手技术员版&#xff08;AOMEI Partition Assistant&#xff09;正是这样一款备受赞誉的专业级硬盘分区软件。…

Day23.一刷数据结构算法(C语言版) 39组合总和;40组合总和II;131分割回文串

一、39组合总和 本题是集合里元素可以用无数次&#xff0c;那么和组合问题的差别&#xff0c;其实仅在于对startIndex上的控制 题目链接&#xff1a;组合总和 文章讲解&#xff1a;代码随想录 视频讲解&#xff1a;带你学透回溯算法-组合总和 &#xff08;39.组合总和&#xff…

从零开始构建大语言模型(MEAP)

原文&#xff1a;annas-archive.org/md5/c19a4ef8ab1664a3c5a59d52651430e2 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 一、理解大型语言模型 本章包括 大型语言模型&#xff08;LLM&#xff09;背后的基本概念的高层次解释 探索 ChatGPT 类 LLM 源自的 Transfo…

workminer之dht通信部分

workminer是通过SSH爆破传播的挖矿木马&#xff0c;感染后会释放xmrig挖矿程序利用主机的CPU挖取北方门罗币。该样本能够执行特定的指令&#xff0c;指令保存在一个配置文件config中&#xff0c;config文件类似于xml文件&#xff0c;里面有要执行的指令和参数&#xff0c;样本中…

spring cloud eureka 初始化报错(A bean with that name has already been defined)

报错内容 The bean ‘eurekaRegistration’, defined in class path resource [org/springframework/cloud/netflix/eureka/EurekaClientAutoConfiguration E u r e k a C l i e n t C o n f i g u r a t i o n . c l a s s ] , c o u l d n o t b e r e g i s t e r e d . A …

回归预测 | Matlab实现NGO-ESN北方苍鹰算法优化回声状态网络多输入单输出回归预测

回归预测 | Matlab实现NGO-ESN北方苍鹰算法优化回声状态网络多输入单输出回归预测 目录 回归预测 | Matlab实现NGO-ESN北方苍鹰算法优化回声状态网络多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现NGO-ESN北方苍鹰算法优化回声状态网络…