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.时间和空间复杂度
.如何衡量一个算法的好坏：时间复杂度和空间复杂度 算法效率分为时间效率和空间效率，时间效率称为时间复杂度，空间效率称为空间复杂度 时间复杂度 算法的时间复杂度是一个数学函数，它描述了算法的运行时间，一个算法执…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...
工业安全零事故的智能守护者：一体化AI智能安防平台
前言： 通过AI视觉技术，为船厂提供全面的安全监控解决方案，涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面，能够实现对应负责人反馈机制，并最终实现数据的统计报表。提升船厂…...
前端倒计时误差!
提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...
spring：实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例，也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下： 定义实例工厂类（Java代码），定义实例工厂（xml），定义调用实例工厂ÿ…...
ETLCloud可能遇到的问题有哪些？常见坑位解析
数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...