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.时间和空间复杂度
.如何衡量一个算法的好坏：时间复杂度和空间复杂度 算法效率分为时间效率和空间效率，时间效率称为时间复杂度，空间效率称为空间复杂度 时间复杂度 算法的时间复杂度是一个数学函数，它描述了算法的运行时间，一个算法执…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）：…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分： 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析： CTR…...
)
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1） にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために ＆ ように（３）そう（４）にする3、…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
高等数学（下）题型笔记（八）空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile，新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕，#AI 监考一度冲上热搜。当AI深度融入高考，#时间同步 不再是辅助功能，而是决定AI监考系统成败的“生命线”。 AI亮相2025高考，40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕，江西、…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，社区养老保险系统小程序被用户普遍使用，为方…...