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.时间和空间复杂度
.如何衡量一个算法的好坏：时间复杂度和空间复杂度 算法效率分为时间效率和空间效率，时间效率称为时间复杂度，空间效率称为空间复杂度 时间复杂度 算法的时间复杂度是一个数学函数，它描述了算法的运行时间，一个算法执…...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器：https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
（二）TensorRT-LLM | 模型导出（v0.20.0rc3）
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
UE5 学习系列（三）创建和移动物体
这篇博客是该系列的第三篇，是在之前两篇博客的基础上展开，主要介绍如何在操作界面中创建和拖动物体，这篇博客跟随的视频链接如下： B 站视频：s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
linux 错误码总结
1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...
return this；返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请，不同级别的经理有不同的审批权限： // 抽象处理者：审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中，附加包含目录、附加库目录和附加依赖项是三个至关重要的设置，它们相互配合，确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中，这些概念容易让人混淆，但深入理解它们的作用和联…...
LangFlow技术架构分析
🔧 LangFlow 的可视化技术栈 前端节点编辑器 底层框架：基于 （一个现代化的 React 节点绘图库） 功能： 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...
TJCTF 2025
还以为是天津的。这个比较容易，虽然绕了点弯，可还是把CP AK了，不过我会的别人也会，还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...
leetcode_69.x的平方根
题目如下 ： 看到题 ，我们最原始的想法就是暴力解决: for(long long i 0;i<INT_MAX;i){if(i*ix){return i;}else if((i*i>x)&&((i-1)*(i-1)<x)){return i-1;}}我们直接开始遍历，我们是整数的平方根，所以我们分两…...