Vue实现留言板（实现增删改查）注意：自己引入Vue.js哦
代码：
<!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哦
代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><scri…...
IDEA创建Spring Boot项目配置阿里云Spring Initializr Server URL【详细教程-轻松学会】
1.首先打开idea选择新建项目 2.选择Spring Boot框架(就是选择Spring Initializr这个) 3.点击中间界面Server URL后面的三个点更换为阿里云的Server URL Idea中默认的Server URL地址：https://start.spring.io/ 修改为阿里云Server URL地址：https://star…...
读取电视剧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…...
HTML前端开发-- Iconfont 矢量图库使用简介
一、SVG 简介及基础语法 1. SVG 简介 SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，用于在网页上显示二维图形。SVG 图形可以无限缩放而不会失真，非常适合用于图标、图表和复杂图形。SVG 文件是文本文件&#x…...
使用Allure作为测试报告生成器（Java+Selenium）
背景 JAVA项目中原先用Jenkinsseleniumselenium grid来日常测试UI并记录。 问题 当某一个testSuite失败时，当需要确认UI regression issue还是selenium test case自身的问题，需要去jenkins中查log，一般得到的是“Can not find element xxx…...
RocketMQ面试题合集
消费者获取消息是从Master Broker还是Slave Broker获取？ Master Broker宕机，Slave Broker会自动切换为Master Broker吗？ 这种Master-Slave模式不是彻底的高可用模式，他没法实现自动把Slave切换为Master。在RocketMQ 4.5之后&…...
Qt初识_对象树
个人主页：C忠实粉丝 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 C忠实粉丝 原创 Qt初识_对象树 收录于专栏【Qt开发】 本专栏旨在分享学习Qt的一点学习笔记，欢迎大家在评论区交流讨论💌 目录 什么是对象树 为什么要引…...
axios的get和post请求，关于携带参数相关的讲解一下
在使用 Axios 发送 HTTP 请求时，GET 和 POST 请求携带参数的方式有所不同。以下是关于这两种请求方法携带参数的详细讲解： GET 请求携带参数 对于 GET 请求，参数通常附加在 URL 之后，以查询字符串的形式传递。 直接在 URL 中拼接…...
Vue前端开发-路由其他配置
在路由文件中，除了跳转配置外，还可以进行路径重定向配置，如果没有找到对应的地址，还可以实现404的配置，同时，如果某个页面需要权限登录，还可以进行路由守卫配置，接下来，分…...
框架建设实战7——定时任务组件
在金融系统中，或者其他对账系统里，往往离不开分布式定时任务。用来做查证或者重试处理。 分布式job目前一般有如下三种： 1.elastic job 当当出品，比较老牌。新公司用的应该不多了。 2.xxl-job 个人开源项目。便于二开；有简洁的后管配置界面，方便接入。 3.powerjob …...
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…...
【PlantUML系列】用例图（三）
目录 一、组成部分 二、典型案例 一、组成部分 参与者（Actors）：使用关键字 actor 后跟参与者的名称。用例（Use Cases）：使用关键字 usecase 后跟用例的名称和编号（可选）。系统边界…...
发送请求时遇到了数据库完整性约束错误 1048 Column ‘platform‘ cannot be null
可以这样解决 在 Vue 2 中封装接口请求时，确保每次请求都包含 platform Header 参数的最佳实践是通过创建一个全局的 Axios 实例，并为这个实例设置默认的 Header。这样可以确保所有通过该实例发送的请求都会自动包含 platform 参数。此外，你…...
三菱FX3U模拟量产品的介绍
FX3u可编程控制器模拟量产品包括：特殊适配器、特殊功能模块的连接 1、连接在FX3U可编程控制器的左侧。 2、连接特殊适配器时，需要功能扩展板。 3、最多可以连接4台模拟量特殊适配器。 4、使用高速输入输出特殊适配器时，请将模拟量特殊适配器连…...
pdf转图片
目录 pdf2image库 PyMuPDF库 python-office库 pdfplumber库 pdf2image库 安装：pip install pdf2image 使用时会报错：pdf2image.exceptions.PDFInfoNotInstalledError: Unable to get page count. Is poppler installed and in PATH? 需要安装 po…...
Go 协程上下文切换的代价
在 Go 语言中，协程（Goroutine）是一种非常轻量级的并发执行单元，设计之初就是为了简化并发编程并提高性能。协程的上下文切换被认为是非常高效的，但是它的真正性能优势需要我们深入了解其背后的机制。 本文将深入探讨 …...
HTTP 持久连接（长连接）
HTTP 持久连接（长连接） HTTP 持久连接（HTTP Persistent Connections），也常被称作 HTTP 长连接，是 HTTP 协议中的一种重要特性，以下是关于它的详细介绍： 一、基本概念 在传统的 HTT…...
12月10日IO
作业：使用read和write实现拷贝文件，将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…...
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…...
Springboot MVC
1. Springboot为MVC提供的自动配置 Spring Boot 为 Spring MVC 提供了自动配置，这在大多数应用程序中都能很好地工作。除了已经实现了 Spring MVC 的默认功能外，自动配置还提供了以下特性： 包括 ContentNegotiatingViewResolver 和 BeanNam…...
MySQL数据表记录增操作
对数据库的操作用的最最频繁的呢,总结起来就四个字:增删改查! 查是属于DQL(Data QueryLanguage ，数据查询语言)部分,而增、改、删属于DML（Data Manipulation Language, 数据操纵语言） 增：作用是往数据库的数据表里写入记录值 语…...
maven报错“找不到符号“
问题 springboot项目 maven编译打包过程，报错"找不到符号" 解决 很多网上方法都试过，都没用 换jdk，把17->21...
python进阶-05-利用Selenium来实现动态爬虫
python进阶-05-利用Selenium来实现动态爬虫 一.说明 这是python进阶部分05，我们上一篇文章学习了Scrapy来爬取网站，但是很多网站需要登录才能爬取有用的信息，或者网站的静态部分是一个空壳，内容是js动态加载的,或者人机验证&…...
P1226 【模板】快速幂
题目描述 给你三个整数 𝑎,𝑏,𝑝求 𝑎𝑏 mod 𝑝 输入格式 输入只有一行三个整数，分别代表 𝑎,𝑏,𝑝 输出格式 输出一行一个字符串 a^b mod ps…...
【C++】求第二大的数详细解析
博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯题目描述💯输入描述💯解题思路分析1. 题目核心要求2. 代码实现与解析3. 核心逻辑逐步解析定义并初始化变量遍历并处理输入数据更新最大值与次大值输…...
从零开始学TiDB（3）TiKV 持久化机制
如图，每个TiKV有两个rocksdb实例，rocksdbKV复制存储键值对，rocksdb raft负责存储复制的日志 。 每个region及其副本构成了raft group。这个OB的Zone其实有点类似，在OB中每个Unit及其副本构成了paxos组，在TiDB中叫raft…...
Elasticsearch+Kibana+IK分词器+拼音分词器安装
目录 ES报错 Kibanaik分词器拼音分词器 安装都比较简单，可以参考这几篇博客 ES 如何在 Linux，MacOS 及 Windows 上进行安装 Elasticsearch 报错 ES启动报错error downloading geoip database [GeoLite2-ASN.mmdb] Kibana KIBANA的安装教程ÿ…...
子网划分实例
看到有人问这个问题： 想了一下，这是一个子网划分的问题： 处理方法如图： 这是一个子网划分的问题 设备1用三层交换机，端口设置为路由模式，设备2和设备3为傻瓜交换机模式 设备2和设备3下挂设备都是26为掩码&…...
上海亚商投顾：创业板指震荡调整 机器人概念股再度爆发
上海亚商投顾前言：无惧大盘涨跌，解密龙虎榜资金，跟踪一线游资和机构资金动向，识别短期热点和强势个股。 一.市场情绪 沪指昨日冲高回落，深成指、创业板指盘中跌超1%，尾盘跌幅有所收窄。机器人概念股逆势爆…...
【C++ 20进阶（2）：初始化 Initializer
【C 20进阶（2）：初始化 Initializer】 原文：https://blog.csdn.net/weixin_44259356/article/details/144377955 引言 本篇文章为系列文章将着重介绍C20新特性，一是希望可以和大家交流分享，二是也便于自己…...
做网站必须有框架是吗/seo外包公司兴田德润
录🦌🕐什么是字符串🕑基础知识🕔拼接字符串🕖字符串索引🕘字符串切片(重)🕚printf风格的字符串格式化🕛字符串常见的方法🕐什么是字符串 字符串是由 Unicode 码位构成的…...
武汉值得去的互联网公司/南宁seo排名收费
https://sourceforge.net/projects/cloc/files/cloc/v1.64/...
外国人学做中国菜的网站/百度百度推广
昨天讲解了JWT的介绍、应用场景、优点及注意事项等，今天来个JWT具体的使用实践吧。 从JWT官网支持的类库来看，jjwt是Java支持的算法中最全的，推荐使用，网址如下。 https://github.com/jwtk/jjwt 下面来看看如何使用jjwt来实现JWT…...
wordpress友情链接定时/18种最有效推广的方式
$content_id array();//1.创建一个数组$content_id[] $_GET[contentid]; //2.对接受到的ID插入到数组中去if(isset($_COOKIE[content_id])) //3.判定cookie是否存在,第一次不存在(如果存在的话){$now_content str_replace("\\", "", $_COOKIE[content_i…...
网站建设厂家/培训班管理系统 免费
项目管理题目连接： http://acm.hdu.edu.cn/showproblem.php?pid4858 Description 我们建造了一个大项目！这个项目有n个节点，用很多边连接起来，并且这个项目是连通的！ 两个节点间可能有多条边，不过一条边的…...
六安seo地址/成都seo优化排名推广
<asp:textbox id"txtWXMT" runat"server" Width"100%" Height"108px" TextMode"MultiLine"></asp:textbox>...