VUE留言板
效果预览图
完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>作业</title><style>body{background: #ecdada;}*{margin: 0;padding: 0;}#app{width: 1000px;height: 100%;margin: 10px auto;}h2{text-align: center;margin-top: 10px;}.wp{width: 960px;height: 250px;background: pink;overflow: hidden;border-radius: 10px;padding: 20px;}textarea{display: block;margin: 5px auto;border-radius: 10px;padding: 10px;resize: none;}.wp button{display: block;width: 60px;height: 40px;background: #99ead6;margin-left: auto;border: none;border-radius: 5px;cursor: pointer;}input{width: 200px;height: 30px;margin-left: 5px;padding-left: 10px;border-radius: 5px;}.pl{width: 1000px;height: 180px;background: #fff;overflow: hidden;border-radius: 10px;margin-top: 20px;}span{width: 980px;height: 40px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-left: 10px;}p{margin: 0 0 10px 10px;}h3{margin: 10px;}button{display: inline-block;width: 60px;height: 40px;background: #99ead6;border: none;border-radius: 5px;margin-top: 10px;margin-left: 20px;cursor: pointer;}</style>
</head>
<body><div id="app"><h2>留言板</h2><div class="wp"><input type="text" placeholder="给自己定义一个身份吧(默认匿名)" v-model="val"><textarea class="area" rows="10" cols="130" placeholder="有什么新鲜事想告诉大家" v-model="val2"></textarea><button v-if="fl==1" @click="add">发布</button><button v-else-if="fl==2" @click="add2(jk)">提交修改</button></div><div class="pl" v-for="(item,index) in arr"><h3>{{arr[index].name}}</h3><p>{{arr[index].times}}</p><span>{{arr[index].cont}}</span><button @click="sc(index)">删除</button><button @click="xg(index)">修改</button></div></div>
</body>
</html>
<script type="module">import { createApp } from './js/vue.esm-browser.js';createApp({data() {return {arr:[{name:'小姚学前端',times:'时间',cont:'学习111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111，好好学习，天天向上'},],val:'',val2:'',fl:1,jk:-1,}},methods:{add(){let nn = new Date().toLocaleString()if (this.val2=='') {alert('内容不能为空')}else if (this.val2!='') {let obj={name:this.val==''? '来自匿名':this.val,times:nn,cont:this.val2}this.arr.unshift(obj)this.val2=''this.val=''this.fl=1}},add2(jk){let nn = new Date().toLocaleString()if (this.val2=='') {alert('内容不能为空')}else if (this.val2!='') {let obj={name:this.val==''? '来自匿名':this.val,times:nn+'修改',cont:this.val2}this.arr[jk]=objthis.val2=''this.val=''this.fl=1}},sc(index){let userResponse = window.confirm("确定要删除留言吗");if (userResponse) {this.arr.splice(index,1)} else {}},xg(index){this.val2=this.arr[index].cont;this.val=this.arr[index].namethis.fl=2this.jk=index}}}).mount('#app')
</script>相关文章：
VUE留言板
效果预览图 完整代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>作业</title><styl…...
【办公软件】电脑开机密码忘记了如何重置？
这个案例是家人的电脑，已经使用多年，又是有小孩操作过的，所以电脑密码根本不记得是什么了？那难道这台电脑就废了吗？需要重新装机吗？那里面的资料不是没有了？ 为了解决以上问题，一般…...
PTA NeuDS-数据库题目集
一.判断题 1.在数据库中产生数据不一致的根本原因是冗余。T 解析：数据冗余是数据库中产生数据不一致的根本原因，因为当同一数据存储在多个位置时，如果其中一个位置的数据被修改，其他位置的数据就不一致了。因此，在数据…...
Redis深入理解-内核请求处理流程、数据传输协议
Redis 内核级请求处理流程 Redis Server 其实就是 Linux 服务器中的一个进程 主要还是下图的流程 应用先和 server 端建立 TCP 连接建立连接之后，server 端就会有一个与该客户端通信的 socket，客户端的读写请求发送到服务端的 socket那么通过 IO 多路…...
Mac电脑卸载/删除nodejs
使用命令行卸载 Node.js 第一步：打开终端，输入以下命令显示 Node.js 的安装路径： which node执行该命令后，会显示安装路径： /usr/local/bin/node第二步：输入以下命令删除 Node.js 相关的文件：…...
C语言之内存函数
C语言之内存函数 文章目录 C语言之内存函数1. memcpy 使⽤和模拟实现1.1 memcpy 函数的使用1.3 memcpy的模拟实现 2. memmove 使⽤和模拟实现2.1 memmove 函数的使用2.2 memmove的模拟实现 3. memset 函数的使用4. memcmp 函数的使⽤ 1. memcpy 使⽤和模拟实现 函数声明如下&a…...
基本数据结构二叉树（1）
目录 1.树概念及结构 1.1树的概念 1.2 树的相关概念 1.3 树的表示 1.4 树在实际中的运用（表示文件系统的目录树结构） 2.二叉树概念及结构 2.1概念 2.2现实中的二叉树： 2.3 特殊的二叉树： 2.5 二叉树的存储结构 2. 链式存…...
【python】Python将100个PDF文件对应的json文件存储到MySql数据库（源码）【独一无二】
👉博__主👈：米码收割机 👉技__能👈：C/Python语言 👉公众号👈：测试开发自动化【获取源码商业合作】 👉荣__誉👈：阿里云博客专家博主、5…...
Android：Google三方库之Adjust集成详细步骤
通过 Adjust 安卓 SDK，您可以在自己的安卓应用中跟踪归因、事件及更多数据。请按照本指南中说明的步骤操作，在应用内设置 Adjust SDK 1、添加依赖 //adjustimplementation("com.adjust.sdk:adjust-android:4.33.5")implementation("com.…...
prometheus|云原生|grafana-9.4.3版本的主题更改
一， grafana-9.4.3版本的主题更改 grafana-9.4.3版本应该是目前比较高的版本了，但不知道是什么原因，grafana的主题界面并不多，只有暗色，亮色和系统色三种 配置管理----首选项里可以看到 亮色： 暗色&…...
B033-Servlet交互 JSP
目录 ServletServlet的三大职责跳转：请求转发和重定向请求转发重定向汇总请求转发与重定向的区别用请求转发和重定向完善登录 JSP第一个JSP概述注释设置创建JSP文件默认字符编码集 JSP的java代码书写JSP的原理三大指令九大内置对象改造动态web工程进行示例内置对象名…...
Less 安装教程
文章目录 前言LESS的系统要求安装LESS例子输出Less编译css工具后言 前言 hello world欢迎来到前端的新世界 😜当前文章系列专栏：Sass和Less 🐱👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板…...
Java研学-多线程
一 名词解析 1 线程 : 控制指定APP(进程)执行的最基本单元(最小单位) 2 进程 : 硬件设备上的每一个应用程序 3 单线程 : 一个进程中只有一个线程执行,实际上基本没有这种情况 4 多线程 : 一个进程中至少有两个或两个以上的线程在执行 二 创建方式 1 共有三种:Thread类. R…...
【日常总结】如何禁止浏览器 http自动跳转成https
一、场景 二、问题 三、解决方案 3.1 chrome 浏览器 3.2 edge 浏览器： 3.3 Safari 浏览器 3.4 Firefox 浏览器 3.5 Microsoft Edge 一、场景 公司网站 http:// 谷歌浏览器中自动转换成 https:// 导致无法访问 二、问题 nginx配置ssl 443接口， ht…...
文本转语音：微软语音合成标记语言 (SSML) 文本结构和事件
SSML 的语音服务实现基于万维网联合会的语音合成标记语言版本 1.0。 语音服务支持的元素可能与 W3C 标准不同。 每个 SSML 文档是使用 SSML 元素（或标记）创建的。 这些元素用于调整语音、风格、音节、韵律、音量等。 下面是 SSML 文档的基本结构…...
计算机网络之物理层（数据通信有关）
一、概述 1.1物理层引入的目的 屏蔽掉传输介质的多样性，导致数据传输方式的不同；物理层的引入使得高层看到的数据都是统一的0,1构成的比特流 1.2.物理层如何实现屏蔽 物理层靠定义的不同的通信协议（一般称通信规程） 这些协议…...
安卓开发之HTTP API服务接口设计（基于okhttp3请求）
安卓中的请求 OkHttp3 是一个开源的 Java/Android HTTP 客户端库，由 Square 公司开发。它提供了简洁和高效 的 API ，用于进行 HTTP 请求、处理响应以及与服务器进行通信。 以下是 OkHttp3 的一些主要特点和功能: 简单易用: OkHttp3 提供了简洁的 API ，使得发送 HTTP 请求变…...
我的第一次SACC之旅
今年有很多第一次，第一次作为“游客”参加DTCC（中国数据库大会），第一次作为讲师参与ACDU中国行（成都站），第一次参加OB年度发布会（包含DBA老友会），而这次是第一…...
)
Codeforces Round 908 (Div. 2)
Codeforces Round 908 (Div. 2) 文章目录 Codeforces Round 908 (Div. 2)ABCD A 获取对战的最后一个即为胜者 #include <bits/stdc.h>using namespace std;void solve() {int n;cin >> n;string s;cin >> s;cout << s[n-1] << endl; }int main…...
Java实现-数据结构 2.时间和空间复杂度
.如何衡量一个算法的好坏：时间复杂度和空间复杂度 算法效率分为时间效率和空间效率，时间效率称为时间复杂度，空间效率称为空间复杂度 时间复杂度 算法的时间复杂度是一个数学函数，它描述了算法的运行时间，一个算法执…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由：大部分的转换软件需要收费，要么功能不齐全，而开会员又用不了几次浪费钱，借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...
使用LangGraph和LangSmith构建多智能体人工智能系统
现在，通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战，比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...
Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...
FFmpeg：Windows系统小白安装及其使用
一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】，注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录（即exe所在文件夹）加入系统变量…...
前端调试HTTP状态码
1xx（信息类状态码） 这类状态码表示临时响应，需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分，客户端应继续发送剩余部分。 2xx（成功类状态码） 表示请求已成功被服务器接收、理解并处…...
2025年- H71-Lc179--39.组合总和(回溯,组合）--Java版
1.题目描述 2.思路 当前的元素可以重复使用。 （1）确定回溯算法函数的参数和返回值（一般是void类型） （2）因为是用递归实现的，所以我们要确定终止条件 （3）单层搜索逻辑 二…...
C#最佳实践：为何优先使用as或is而非强制转换
C#最佳实践：为何优先使用as或is而非强制转换 在 C# 的编程世界里，类型转换是我们经常会遇到的操作。就像在现实生活中，我们可能需要把不同形状的物品重新整理归类一样，在代码里，我们也常常需要将一个数据类型转换为另…...