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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/171199.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flutter | TextField长按时选项菜单复制、粘贴显示为英文问题解决

Flutter | TextField长按时选项菜单复制、粘贴显示为英文问题解决 问题描述&#xff1a; 长按TextField后&#xff0c;显示剪切、复制等选项为英文&#xff0c;如下图所示&#xff0c;这是因为问未设置语言本地化&#xff0c;我们需要进行设置。 首先在pubspec.yaml加入以下依赖…

rsyslog出现Unit rsyslog.service is masked不可用问题解决

博主在测试将日志发送到日志服务器的功能时遇到了rsyslog服务不可用的问题&#xff0c;具体来说&#xff0c;就是执行systemctl restart rsyslog或者 service rsyslog restart命令时&#xff0c;出现了标题中所述的Unit rsyslog.service is masked问题。网上查找了很多资料&…

LuatOS-SOC接口文档(air780E)--pwm - PWM模块

pwm.open(channel, period, pulse, pnum, precision) 开启指定的PWM通道 参数 传入值类型 解释 int PWM通道 int 频率, 1-1000000hz int 占空比 0-分频精度 int 输出周期 0为持续输出, 1为单次输出, 其他为指定脉冲数输出 int 分频精度, 100/256/1000, 默认为100,…

【代码】平抑风电波动的电-氢混合储能容量优化配置(完美复现)matlab-yalmip-cplex/gurobi

程序名称&#xff1a;平抑风电波动的电-氢混合储能容量优化配置 实现平台&#xff1a;matlab-yalmip-cplex/gurobi 代码简介&#xff1a;针对电-氢混合系统协同平抑接入新型电力系统的 新能源波动问题&#xff0c;提出考虑碱性电解槽运行特性的电-氢 混合储能容量优化配置方案…

c和c++中的异同

C和C 中的异同&#xff1a; 相同点&#xff1a; 1.C和C中的const修饰的全局变量都是保存在常量区&#xff0c;不能修改 不同点&#xff1a; C语言中const修饰的局部变量赋值为常量是&#xff0c;局部变量保存在栈区&#xff0c;可以被修改 C中const修饰的局部变量赋值为常量是&…

Meta最新视频生成工具:emu video技术报告解读

Diffusion Models视频生成-博客汇总 前言:去年Meta推出了make-a-video,过去了一年多仍然是视频生成领域的SOTA。最近Meta又推出了更强的视频生成模型EMU Video,刷新了多项指标。这篇博客解读一下背后的论文《EMU VIDEO: Factorizing Text-to-Video Generation by Explicit I…

这一款 Mac 系统终端工具,已经用的爱不释手了!

&#x1f525;&#x1f525;&#x1f525;作为程序员或者运维管理人员&#xff0c;我们经常需要使用终端工具来进行服务器管理及各种操作&#xff0c;比如部署项目、调试代码、查看/优化服务、管理服务器等。 相信大家用的最多的终端工具就是 Xshell、iTerm2和Mobaxterm&#…

【JavaEE初阶】浅谈进程

✏️✏️✏️今天正式进入JavaEE初阶的学习&#xff0c;给大家分享一下关于进程的一些基础知识。了解这部分内容&#xff0c;只是为后续多线程编程打好基础&#xff0c;因此进程部分的知识&#xff0c;不需要了解更加细节的内容。 清风的CSDN博客 &#x1f61b;&#x1f61b;&a…

汽车电子 - UDS

汽车电子 - UDS 概念基本概念分类请求与响应寻址信息物理寻址功能寻址 协议格式&#xff1f;&#xff1f;&#xff1f;750/758厂家自定义的吗&#xff1f;&#xff1f;&#xff1f;&#xff0c; 所有的UDS服务都在这里边吗&#xff1f;&#xff1f;&#xff1f;&#xff0c;代码…

快速弄懂Pyqt5的4种项目部件(Item Widget)

快速掌握Pyqt5的三种主窗口 快速掌握Pyqt5的2种弹簧 快速掌握Pyqt5的5种布局 快速弄懂Pyqt5的5种项目视图&#xff08;Item View&#xff09; 快速掌握Pyqt5的6种按钮 待续。。。 在PyQt5中&#xff0c;item widget是指可以放置在某些特定控件中的小部件&#xff0c;这些控件如…

offer 选择难?说说我的 2 个思考

大家好&#xff0c;我是鱼皮。秋招仍在进行中&#xff0c;随着越来越多的公司开奖&#xff0c;最近 编程导航星球 的小伙伴们也陆续发来了 offer 报喜&#xff1a; 图片 图片 但也有一部分小伙伴陷入了 “甜蜜的烦恼”&#xff0c;拿了几个 offer 却不知道怎么选择。 offer 选择…

存算一体还是存算分离?谈谈数据库基础设施的架构选择

从一则用户案例说起 某金融用户问&#xff0c;数据库用服务器本地盘性能好还是外置存储好&#xff1f;直觉上&#xff0c;本地盘路径短性能应该更好。然而测试结果却出乎意料&#xff1a;同等中等并发压力&#xff0c;混合随机读写模型&#xff0c;服务器本地SSD盘合计4万 IOPS…

使用uniapp开发系统懒加载图片效果

1、创建一个Vue组件 在uniapp项目中&#xff0c;我们可以创建一个独立的Vue组件来实现懒加载图片效果。打开uniapp项目&#xff0c;进入components文件夹&#xff0c;创建一个名为"LazeImage"的组件。 2、编写组件模板 在"LazeImage"组件中&#xff0c;…

【Spring篇】spring核心——AOP面向切面编程

目录 想要彻底理解AOP&#xff0c;我觉得你的先要了解框架的模块化思想&#xff0c;为此先记录框架在讲AOP 什么是java框架&#xff1f;为什么要出现框架&#xff1f; 我总结以下七点来讲述和帮助理解java框架思想 什么是AOP&#xff1f; 如何理解上面这句话呢&#xff1…

快速压缩:迅速减小PDF文件大小的步骤与技巧

虽然png图片格式是一种无损压缩格式&#xff0c;但是png图片的内存大小也是比较大的&#xff0c;而且兼容性上也没有jpg图片好&#xff0c;许多平台推荐的也都是jpg格式&#xff0c;所以当我们需要把png转jpg格式的时候&#xff0c;就需要用到图片格式转换器&#xff0c;今天推…

Pure-Pursuit 跟踪五次多项式轨迹

Pure-Pursuit 跟踪五次多项式轨迹 考虑双移线轨迹 X 轴方向位移较大&#xff0c;机械楼停车场长度无法满足 100 ~ 120 m&#xff0c;因此采用五次多项式进行轨迹规划&#xff0c;在轨迹跟踪部分也能水一些内容 调整 double_lane.cpp 为 ref_lane.cpp&#xff0c;结合 FrenetP…

第7章-使用统计方法进行变量有效性测试-7.3-列联表分析与卡方检验

目录 列联表分析 列联表 Python代码实现列联表 卡方检验 检验统计量

C# 面试题大全

1. 类成员有 2 种可访问形式&#xff1f;注&#xff1a;this.&#xff1b; new Class().Method 2. public static const int A1;这段代码有错误么&#xff1f;是什么&#xff1f; const成员都是static所以应该去掉static. 3. float f-123.567F; int i(int)f; i…

鸿蒙开发报错:agconnect sdk not initialized. please call initialize()【BUG已解决】

文章目录 项目场景:问题描述原因分析:解决方案:总结:项目场景: 鸿蒙开发报错: agconnect sdk not initialized. please call initialize() 问题描述 报错内容为: 10-25 11:41:01.152 6076-16676 E A0c0d0/JSApp: app Log: 数据查询失败: {“code”:1100001,“messag…

使用VC++设计程序对一幅256级灰度图像进行全局固定阈值分割、自适应阈值分割

图像分割–全局固定阈值分割、自适应阈值分割 获取源工程可访问gitee可在此工程的基础上进行学习。 该工程的其他文章&#xff1a; 01- 一元熵值、二维熵值 02- 图像平移变换&#xff0c;图像缩放、图像裁剪、图像对角线镜像以及图像的旋转 03-邻域平均平滑算法、中值滤波算法、…