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

Vue实现留言板（实现增删改查）注意：自己引入Vue.js哦

news 2026/5/12 3:50:57

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script><script src="../js/Vue.js"></script><style>*{margin: 0;padding: 0;}.content{max-width: 500px;margin: 30px auto;border: 1px solid #e5cc7f;padding: 20px;border-radius: 15px ;text-align: center;box-shadow: 1px 1px 20px #e5cc7f;}.inputkuang {margin: 10px 0;display: flex;input{flex: 8;font-size: 20px;padding: 5px 10px;box-sizing: border-box;}button{flex: 1;}}ul{display: flex;flex-direction: column;align-items: flex-start;li{width: 100%;list-style: none;padding: 10px;display: flex; align-items: center;box-sizing: border-box;span{&:nth-child(1){flex: 2;font-size: 14px;}&:nth-child(2){flex: 9;overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}&:nth-child(3){flex: 6;font-size: 12px;}&:nth-child(4){flex: 2;padding: 6px 10px;background-color: #ccc;font-size: 13px;cursor: pointer;}&:nth-child(5){flex: 1;cursor: pointer;font-size: 12px;}}.cha{cursor: pointer;}}}</style>
</head>
<body><div class="content" id="app"><h1>留言版</h1><div class="inputkuang"><input type="text" v-model="msg"><button @click="add()">添加</button></div><ul><li v-for="(item,index) in list" :key="index"><span>{{item.name}}说:</span><span>{{item.content}}</span><span>{{item.date}}</span><span @click="edit(item)">修改</span><span @click="del(item.id)">X </span></li></ul></div><script>let vm = new Vue({el:'#app',data() {return {msg:'',list:[{id:1,name:'张三',content:'1',date:this.sj(),},{id:2,name:'张三',content:'2',date:this.sj(),},{id:3,name:'张三',content:'3',date:this.sj(),},{id:4,name:'张三',content:'4',date:this.sj(),},{id:5,name:'张三',content:'5',date:this.sj(),},]}},// 在这事件处理函数methods: {sj(){let date  = new Date()let sj = date.toLocaleDateString().replace('/','-').replace('/','-')+ ' ' + date.toLocaleTimeString() return sj},add(){let date  = new Date()let sjc = date.getTime()this.list.push({id:sjc,name:'张三',content:this.msg,date:this.sj(),})},del(id){let index = this.list.findIndex(item=>item.id==id)this.list.splice(index,1)},edit(obj){let content = prompt('请输入要修改的值',`${obj.content}`)if (content == "") return alert("修改内容不能为空")this.list.forEach((item, i) => {if (item.id == obj.id && content!='') {item.content = content;}});}},})</script>
</body>
</html>

效果图：

注：自己引入Vue.js哦

相关文章：

Vue实现留言板（实现增删改查）注意：自己引入Vue.js哦

代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><scri…...

编程日记 2024/12/11 16:24:50

IDEA创建Spring Boot项目配置阿里云Spring Initializr Server URL【详细教程-轻松学会】

1.首先打开idea选择新建项目 2.选择Spring Boot框架(就是选择Spring Initializr这个) 3.点击中间界面Server URL后面的三个点更换为阿里云的Server URL Idea中默认的Server URL地址&#xff1a;https://start.spring.io/ 修改为阿里云Server URL地址&#xff1a;https://star…...

编程日记 2024/12/11 16:18:44

读取电视剧MP4视频的每一帧，检测出现的每一个人脸并保存

检测效果还不错，就是追踪有点难做 import cv2 import mediapipe as mp import os from collections import defaultdict# pip install msvc-runtime# 初始化OpenCV的MultiTracker # multi_tracker = cv2.MultiTracker_create() # multi_tracker = cv2.legacy.MultiTracker_cre…...

编程日记 2024/12/11 16:15:40

HTML前端开发-- Iconfont 矢量图库使用简介

一、SVG 简介及基础语法 1. SVG 简介 SVG&#xff08;Scalable Vector Graphics&#xff09;是一种基于 XML 的矢量图形格式&#xff0c;用于在网页上显示二维图形。SVG 图形可以无限缩放而不会失真&#xff0c;非常适合用于图标、图表和复杂图形。SVG 文件是文本文件&#x…...

编程日记 2024/12/11 16:12:36

使用Allure作为测试报告生成器（Java+Selenium）

背景 JAVA项目中原先用Jenkinsseleniumselenium grid来日常测试UI并记录。 问题 当某一个testSuite失败时&#xff0c;当需要确认UI regression issue还是selenium test case自身的问题&#xff0c;需要去jenkins中查log&#xff0c;一般得到的是“Can not find element xxx…...

编程日记 2024/12/11 16:11:34

RocketMQ面试题合集

消费者获取消息是从Master Broker还是Slave Broker获取&#xff1f; Master Broker宕机&#xff0c;Slave Broker会自动切换为Master Broker吗&#xff1f; 这种Master-Slave模式不是彻底的高可用模式&#xff0c;他没法实现自动把Slave切换为Master。在RocketMQ 4.5之后&…...

编程日记 2024/12/11 16:09:31

Qt初识_对象树

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 Qt初识_对象树 收录于专栏【Qt开发】 本专栏旨在分享学习Qt的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 什么是对象树 为什么要引…...

编程日记 2024/12/11 16:06:28

axios的get和post请求，关于携带参数相关的讲解一下

在使用 Axios 发送 HTTP 请求时&#xff0c;GET 和 POST 请求携带参数的方式有所不同。以下是关于这两种请求方法携带参数的详细讲解&#xff1a; GET 请求携带参数 对于 GET 请求&#xff0c;参数通常附加在 URL 之后&#xff0c;以查询字符串的形式传递。 直接在 URL 中拼接…...

编程日记 2024/12/11 16:05:26

Vue前端开发-路由其他配置

在路由文件中&#xff0c;除了跳转配置外&#xff0c;还可以进行路径重定向配置&#xff0c;如果没有找到对应的地址&#xff0c;还可以实现404的配置&#xff0c;同时&#xff0c;如果某个页面需要权限登录&#xff0c;还可以进行路由守卫配置&#xff0c;接下来&#xff0c;分…...

编程日记 2024/12/11 16:00:18

框架建设实战7——定时任务组件

在金融系统中，或者其他对账系统里，往往离不开分布式定时任务。用来做查证或者重试处理。 分布式job目前一般有如下三种： 1.elastic job 当当出品，比较老牌。新公司用的应该不多了。 2.xxl-job 个人开源项目。便于二开；有简洁的后管配置界面，方便接入。 3.powerjob …...

编程日记 2024/12/11 15:59:16

mybatis 整合 ehcache

pom.xml <!-- ehcache依赖 --><dependency><groupId>org.mybatis.caches</groupId><artifactId>mybatis-ehcache</artifactId><version>1.1.0</version></dependency>ehcache.xml <?xml version"1.0" en…...

编程日记 2024/12/11 15:57:13

【PlantUML系列】用例图（三）

目录 一、组成部分 二、典型案例 一、组成部分 参与者&#xff08;Actors&#xff09;&#xff1a;使用关键字 actor 后跟参与者的名称。用例&#xff08;Use Cases&#xff09;&#xff1a;使用关键字 usecase 后跟用例的名称和编号&#xff08;可选&#xff09;。系统边界…...

编程日记 2024/12/11 15:55:11

发送请求时遇到了数据库完整性约束错误 1048 Column ‘platform‘ cannot be null

可以这样解决 在 Vue 2 中封装接口请求时&#xff0c;确保每次请求都包含 platform Header 参数的最佳实践是通过创建一个全局的 Axios 实例&#xff0c;并为这个实例设置默认的 Header。这样可以确保所有通过该实例发送的请求都会自动包含 platform 参数。此外&#xff0c;你…...

编程日记 2024/12/11 15:51:06

三菱FX3U模拟量产品的介绍

FX3u可编程控制器模拟量产品包括&#xff1a;特殊适配器、特殊功能模块的连接 1、连接在FX3U可编程控制器的左侧。 2、连接特殊适配器时&#xff0c;需要功能扩展板。 3、最多可以连接4台模拟量特殊适配器。 4、使用高速输入输出特殊适配器时&#xff0c;请将模拟量特殊适配器连…...

编程日记 2024/12/11 15:50:05

pdf转图片

目录 pdf2image库 PyMuPDF库 python-office库 pdfplumber库 pdf2image库 安装&#xff1a;pip install pdf2image 使用时会报错&#xff1a;pdf2image.exceptions.PDFInfoNotInstalledError: Unable to get page count. Is poppler installed and in PATH? 需要安装 po…...

编程日记 2024/12/11 15:47:00

Go 协程上下文切换的代价

在 Go 语言中&#xff0c;协程&#xff08;Goroutine&#xff09;是一种非常轻量级的并发执行单元&#xff0c;设计之初就是为了简化并发编程并提高性能。协程的上下文切换被认为是非常高效的&#xff0c;但是它的真正性能优势需要我们深入了解其背后的机制。 本文将深入探讨 …...

编程日记 2024/12/11 15:44:58

HTTP 持久连接（长连接）

HTTP 持久连接&#xff08;长连接&#xff09; HTTP 持久连接&#xff08;HTTP Persistent Connections&#xff09;&#xff0c;也常被称作 HTTP 长连接&#xff0c;是 HTTP 协议中的一种重要特性&#xff0c;以下是关于它的详细介绍&#xff1a; 一、基本概念 在传统的 HTT…...

编程日记 2024/12/11 15:41:54

12月10日IO

作业&#xff1a;使用read和write实现拷贝文件&#xff0c;将1.txt内容前一半拷贝给2.txt后一半拷贝给3.txt #include <myhead.h>int main(int argc, const char *argv[]) {//打开三个文件int fd1,fd2,fd3;fd1open("1.txt",O_RDONLY);fd2open("2.txt&quo…...

编程日记 2024/12/11 15:39:52

Composite Pattern

Composite Pattern The intent of Composite pattern is to composite objects into tree structures to represent a “part-whole” hierarchy .The Composite Pattern allow clients to treat individual objects and composite objects uniformly. UML Used in Qt Exam…...

编程日记 2024/12/11 15:35:43

Springboot MVC

1. Springboot为MVC提供的自动配置 Spring Boot 为 Spring MVC 提供了自动配置&#xff0c;这在大多数应用程序中都能很好地工作。除了已经实现了 Spring MVC 的默认功能外&#xff0c;自动配置还提供了以下特性&#xff1a; 包括 ContentNegotiatingViewResolver 和 BeanNam…...

编程日记 2024/12/11 15:34:42

MarkFlowy：基于智能感知的Markdown写作流工具设计与实现

1. 项目概述&#xff1a;一个为Markdown而生的高效写作流工具 如果你和我一样&#xff0c;每天的工作都离不开Markdown——写技术文档、整理项目笔记、构思博客文章&#xff0c;那你一定体会过那种在“专注写作”和“格式调整”之间反复横跳的痛苦。刚进入心流状态&#xff0c;…...

编程新知 2026/5/12 3:38:40

告别STM32cubeIDE的路径红波浪线：VSCode配置C/C++插件的保姆级指南

告别STM32cubeIDE的路径红波浪线&#xff1a;VSCode配置C/C插件的保姆级指南 对于习惯了STM32cubeIDE的嵌入式开发者来说&#xff0c;第一次用VSCode打开工程时&#xff0c;满屏的红色波浪线可能会让人瞬间崩溃。别担心&#xff0c;这不是你的代码有问题&#xff0c;而是VSCode…...

编程新知 2026/5/12 3:27:42

Apache Airflow 系列教程 | 第34课：实战项目 — 机器学习管道编排

导读（Introduction） 欢迎来到 Apache Airflow 源码深度解析系列的第34课。 在上一课中，我们构建了一个完整的企业级 ETL 平台，涵盖了多层数据仓库、多团队协作和监控告警。本课将目光转向另一个高价值场景——机器学习管道编排（ML Pipeline Orchestration）。 机器学习…...

编程新知 2026/5/12 3:25:41

别再满世界找旧版了！用JetBrains Toolbox App一键管理所有IDE版本（含IDEA/PyCharm/WebStorm）

高效管理开发环境&#xff1a;JetBrains Toolbox App 的进阶使用指南 每次打开编辑器都要重新配置环境&#xff1f;项目组里有人用新版有人用旧版导致协作困难&#xff1f;插件突然不兼容最新版本&#xff1f;这些问题困扰着许多开发者。JetBrains Toolbox App 作为官方推出的管…...

编程新知 2026/5/12 3:21:11

【研报 A110】物理AI时代的具身数据采集需求研究：国家级训练场落地，开源生态加速建设

摘要&#xff1a;物理AI时代&#xff0c;具身智能与世界模型的发展&#xff0c;推动具身数据采集成为下一代数据基建的核心浪潮。具身大模型对数据有着EB级的海量需求&#xff0c;同时对多模态、异构性与质量要求极高&#xff0c;当前数据缺口成为制约具身智能发展的核心瓶颈&a…...

编程新知 2026/5/12 1:39:57

嵌入式系统调试技术：从JTAG到多核同步的实战指南

1. 嵌入式系统调试技术概述在嵌入式系统开发过程中&#xff0c;调试环节往往占据整个开发周期的40%-60%时间。与通用计算机系统不同&#xff0c;嵌入式系统通常运行在资源受限的环境中&#xff0c;缺乏标准输入输出设备&#xff0c;这使得调试工作更具挑战性。我曾参与过多个工…...

编程新知 2026/5/12 1:33:50

搜搜果：一种面向AI生成内容验真与品牌可见度监测的实现方案

1. 问题定义 随着大语言模型&#xff08;LLM&#xff09;广泛集成到搜索、问答、推荐等场景中&#xff0c;出现两个可观测的问题&#xff1a; 内容可信性问题&#xff1a;模型会以高置信度输出事实上不存在的实体、事件或引用&#xff08;幻觉&#xff0c;hallucination&#…...

编程新知 2026/5/12 1:29:43

中国科学院发布类脑大模型瞬悉2.0，打破长序列与低功耗部署核心瓶颈

来源&#xff1a;ScienceAI 本文约3000字&#xff0c;建议阅读5分钟验证了类脑机制与高效模型架构结合的广阔前景。当前&#xff0c;大模型发展正从「参数和数据规模驱动」逐步延展至「上下文能力驱动」。在智能体、代码理解、长文档分析等应用中&#xff0c;模型需要处理数十万…...

编程新知 2026/5/11 22:16:29

TlbbGmTool：从数据库小白到《天龙八部》单机版管理大师的蜕变之旅

TlbbGmTool&#xff1a;从数据库小白到《天龙八部》单机版管理大师的蜕变之旅 【免费下载链接】TlbbGmTool 某网络游戏的单机版本GM工具 项目地址: https://gitcode.com/gh_mirrors/tl/TlbbGmTool 你是否曾经面对《天龙八部》单机版数据库的复杂结构感到无从下手&#x…...

编程新知 2026/5/11 22:05:23

STM32H750调试KSZ8863翻车实录：从F4经验到H7的坑，硬件配置避雷指南

STM32H7与KSZ8863实战避坑指南&#xff1a;从F4经验到H7的硬件设计差异 调试以太网PHY芯片KSZ8863时&#xff0c;许多工程师会带着STM32F4的成功经验直接迁移到STM32H7平台&#xff0c;结果往往遭遇意想不到的硬件兼容性问题。本文将深入剖析两个平台在RMII接口设计上的关键差…...

编程新知 2026/5/11 20:57:24