当前位置： 首页 > news >正文

【后端速成 Vue】实现动态表白墙

news 2026/5/30 17:19:39

前言：

通过前面几篇的文章的讲解，已经学习到了很多的 Vue 指令了，那么现在就将学习到的指令利用起来，做一个小的 demo。

最终效果图：

通过效果图可以发现，一共有这几个功能：

● 渲染列表：也就是动态的展示表白的数据。

● 删除功能：每条数据后面有一个删除按钮，单击即可删除指定数据。

● 添加功能：可以输入对应的文字，添加到表白列表中。

● 统计清空：程序会统计当前表白的条数，单击清空按钮会清空所有的表白。

1、渲染列表

这个功能很简单，使用 v-for 就可以实现，首先需要准备要渲染的元素和数据，这里使用一个 list 的装需要渲染的数据，每个 list 里面放一个对象，对象分别有两个属性，id 和 content，伪代码实现：

<ul class="data-list" id="dataList"><li class="data-item" v-for="item in list" :key="item.id"><span class="content">{{ item.content }}</span><button class="delete-btn" @click="del(item.id)">删除</button></li>
</ul>
<script>const app = new Vue({el: '#app',data: {list: [{ id: 1, content: '篮球哥太帅了吧!!!' },{ id: 2, content: '我要去篮球哥的心里.' }]}}
</script>

2、删除功能

删除类似之前写过的音乐清单，通过 id，进行删除，伪代码如下：

del (id) {this.list = this.list.filter(item => item.id !== id)
}

3、添加功能

这里直接往 list 数组中最前面插入一条数据就是，此处采取的是 unshift 方法，id 使用当前的时间戳表示，正常来说这里的数据是通过后端返回的，目前为了演示功能，暂时先这样写。

add () {this.list.unshift({id: +new Date(),content: this.value})// 插入完成后, 清空值this.value = ''
}

4、统计清空

统计只需要统计当前的 list.length 就可以了，所以使用差值表达式即可。

<div><p>共 <span id="count">{{ list.length }}</span> 条数据</p></div>

清空只需要将 list 等于一个新的空 list 即可。

clear() {this.list = []
}

5、完整代码

<!DOCTYPE html>
<html>
<head><title>表白墙</title><style>* {margin: 0;padding: 0;}body {background-color: #edecec;}.container {max-width: 600px;margin: 50px auto;padding: 20px;background-color: white;border-radius: 10px;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);}.container h1 {text-align: center;}.input-container {padding: 20px 0;display: flex;justify-content: space-between;align-items: center;}.input-container input {width: 90%;height: 40px;border: 1px solid black;border-right: none;padding-left: 10px;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);}.input-container button {width: 10%;height: 41px;border: 1px solid black;border-left: none;cursor: pointer;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);}.data-list {list-style-type: none;padding: 0;}.data-item {height: 40px;display: flex;justify-content: space-between;align-items: center;margin: 10px 0;background-color: rgb(255, 255, 255);box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);border-radius: 5px;border: 1px solid green;}.content {padding-left: 20px;}.delete-btn {color: #ff0000;border: none;padding: 5px 10px;cursor: pointer;background: none;}.stats {margin-top: 20px;display: flex;justify-content: space-between;}#clearBtn {cursor: pointer;background: none;border: none;}.clear-btn {background-color: #ff0000;color: #fff;border: none;padding: 5px 10px;cursor: pointer;}</style>
</head>
<body><div class="container" id="app"><h1>表白墙</h1><div class="input-container"><input type="text" id="messageInput" placeholder="输入表白内容" v-model="value"><button id="addBtn" @click="add()">添加</button></div><ul class="data-list" id="dataList"><li class="data-item" v-for="item in list" :key="item.id"><span class="content">{{ item.content }}</span><button class="delete-btn" @click="del(item.id)">删除</button></li></ul><div class="stats" v-show=" list.length > 0"><div><p>共 <span id="count">{{ list.length }}</span> 条数据</p></div><button id="clearBtn" @click="clear()">清空数据</button></div></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>const app = new Vue({el: '#app',data: {value: '',list: [{ id: 1, content: '篮球哥太帅了吧!!!' },{ id: 2, content: '我要去篮球哥的心里.' }]},methods: {del (id) {this.list = this.list.filter(item => item.id !== id)},add () {this.list.unshift({id: +new Date(),content: this.value})// 插入完成后, 清空值this.value = ''},clear() {this.list = []}}})
</script>
</html>

对于这个小 demo 需要注意，当 list 没有元素的时候，是不能展示最下面的统计和清空数据按钮的，所以此处采用 v-show 来控制元素的显示和隐藏，其他的就是把前面学习的指令给综合起来了，这个 demo 没有什么难度，重点是练习前面学习的指令，建议看完这个功能之后，自己能写出来一个类似的，这样就能很好的巩固指令的知识点了。

6、更多建议

就业市场的行情愈发严峻，对于计算机专业的毕业生和求职者来说，找工作似乎变得更加具有挑战性。但别担心，机会总是留给有准备的人。

最新招聘可以通过下面小程序获取最新企业招聘信息，都是新岗位，可内推，完善好简历投递，可以简历托管，让HR主动联系你。加油，计算机人！未来仍可期！

相关文章：

【后端速成 Vue】实现动态表白墙

前言&#xff1a; 通过前面几篇的文章的讲解&#xff0c;已经学习到了很多的 Vue 指令了&#xff0c;那么现在就将学习到的指令利用起来&#xff0c;做一个小的 demo。 最终效果图&#xff1a; 通过效果图可以发现&#xff0c;一共有这几个功能&#xff1a; ● 渲染列表&…...

编程日记 2024/8/13 14:54:45

【日常开发】 java返回ECharts数据结构封装

java返回ECharts数据结构封装 一、前端页面示例图如下&#xff1a; 二、准备测试数据&#xff1a; 三、后端 格式封装代码&#xff1a; 四、最终结果&#xff1a; &#x1f388;边走、边悟&#x1f388;迟早会好 一、前端页面示例图如下&#xff1a; 二、准备测试数据&am…...

编程日记 2024/8/13 14:53:44

Table表格控件实现单选功能

Table表格控件实现单选功能 <el-tableref"tableRef"height"385"style"--el-table-border-color: none"row-key"contractId"highlight-current-rowsingle-selectselect"handleSelect":data"contractInfo">&l…...

编程日记 2024/8/13 14:51:42

AI技术加速落地 港科广联手思谋打开智能缺陷检测新纪元

AI 技术应用落地的元年&#xff0c;工业是主战场&#xff0c;尤其是工业缺陷检测。 在“生产制造-缺陷检测-工艺优化-生产制造”的智能制造闭环链条中&#xff0c;基于AI的智能缺陷检测扮演着“把关者”的角色。但这个把关者长期以来却缺少一个称手的工具——样本量大、精度高…...

编程日记 2024/8/13 14:50:40

Python爬虫开发：BeautifulSoup、Scrapy入门

在现代网络开发中&#xff0c;网络爬虫是一个非常重要的工具。它可以自动化地从网页中提取数据&#xff0c;并且可以用于各种用途&#xff0c;如数据收集、信息聚合和内容监控等。在Python中&#xff0c;有多个库可以用于爬虫开发&#xff0c;其中BeautifulSoup和Scrapy是两个非…...

编程日记 2024/8/13 14:49:39

数据科学、数据分析、人工智能必备知识汇总-----常用数据分析方法-----持续更新

数据科学、数据分析、人工智能必备知识汇总-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/140174015 文章目录 一、对比分析法1. 按时间和地区2. 同比和环比 二、分组分析法三、结构分析法四、交叉分析法五、矩阵分…...

编程日记 2024/8/13 14:45:35

学习vue Router 一 起步，编程式导航，历史记录，路由传参

目录 起步&#xff0c;安装 1. 安装 2. 使用 命名路由 编程式导航 1. 字符串模式 2. 对象模式 3. 命名路由模式 历史记录 replace的使用 横跨历史 路由传参 1. query路由传参 2. 动态路由传参 3. 二者的区别 起步&#xff0c;安装 router 路由 因为vue是单页应用…...

编程日记 2024/8/13 14:44:33

Qt/C++最新地图组件发布/历时半年重构/同时支持各种地图内核/包括百度高德腾讯天地图

一、前言说明 最近花了半年时间&#xff0c;专门重构了整个地图组件&#xff0c;之前写的比较粗糙&#xff0c;有点为了完成功能而做的&#xff0c;没有考虑太多拓展性和易用性。这套地图自检这几年大量的实际项目和用户使用下来&#xff0c;反馈了不少很好的建议和意见&#…...

编程日记 2024/8/13 14:43:32

Laravel + Thinkphp 生成二维码

安装依赖 composer require endroid/qr-code 编写ThinkPhP代码 public function index() {// 创建二维码内容$qrCode new QrCode(Hello World);// 设置二维码的配置$qrCode->setSize(300);$qrCode->setMargin(10);// 获取二维码图像$writer new PngWriter();$result…...

编程日记 2024/8/13 14:42:31

2408C++,C++20的无侵入式反射

原文 C17基于结构绑定的编译期反射 事实上不需要宏的编译期反射在C17中已用得很多了,比如struct_pack的编译期反射就不需要宏,因为C17结构绑定可直接得到一个聚集类的成员的引用. struct person {int id;std::string name;int age; }; int main() {person p{1, "tom&qu…...

编程日记 2024/8/13 14:36:23

抽象工厂模式(Abstract factory pattern)- python实现

抽象工厂模式的通俗示例 想象一下&#xff0c;你正在经营一家家具店&#xff0c;你需要从不同的供应商那里采购不同的家具系列。有的供应商提供的是现代风格家具&#xff0c;包括现代沙发、现代椅子和现代桌子&#xff1b;而有的供应商提供的是古典风格家具&#xff0c;包括古…...

编程日记 2024/8/13 14:35:22

adb Connection reset by peer的解决方法

本文同步发于&#xff1a;https://www.cnblogs.com/yeshen-org/p/18350232 最近在编译一个老项目&#xff0c;项目中依赖了很多第三方库&#xff0c;用gradle编译要20-30分钟&#xff0c;而且内存开销很大。 公司配的15G内存的电脑&#xff0c;一次编译能用到14G。 编译的时候&…...

编程日记 2024/8/13 14:34:20

111111111

1111111111111111111...

编程日记 2024/8/13 14:33:19

搜维尔科技：Varjo XR-4使用UE5 打造最具沉浸感的混合现实环境

Varjo XR-4使用UE5打造最具沉浸感的混合现实环境 搜维尔科技&#xff1a;Varjo XR-4使用UE5 打造最具沉浸感的混合现实环境...

编程日记 2024/8/13 14:32:17

从分散到集中：TSINGSEE青犀EasyCVR视频汇聚网关在视频整体监控解决方案中的整合作用

边缘计算视频汇聚网关是基于开放式、大融合、全兼容、标准化的设计架构理念&#xff0c;依据《安全防范视频监控联网系统信息传输、交换、控制技术要求》&#xff08;GB/T28181-2011&#xff09;标准开发&#xff0c;集流媒体转发、视频编码、视频管理、标准通信协议、网络穿透…...

编程日记 2024/8/13 14:31:16

React学习-jsx语法

jsx语法&#xff0c;浏览器不认识&#xff0c;需要经过babel编译 https://babeljs.io/ 面试题&#xff1a;jsx的作用&#xff1f; 普通回答&#xff1a;可以在js中返回dom&#xff0c;经过babel编译成js认识的代码import { jsx as _jsx, jsxs as _jsxs } from "react/j…...

编程日记 2024/8/13 14:29:13

uniapp多图上传uni.chooseImage上传照片uni.uploadFile

uniapp多图上传uni.chooseImage上传照片uni.uploadFile 代码示例&#xff1a; /**上传照片 多图*/getImage() {uni.chooseImage({count: 9, //默认9sizeType: [original, compressed], //可以指定是原图还是压缩图&#xff0c;默认二者都有sourceType: [album], //从相册选择/…...

编程日记 2024/8/13 14:27:11

鸿蒙（API 12 Beta2版）媒体开发【处理音频焦点事件】

音频打断策略 多音频并发&#xff0c;即多个音频流同时播放。此场景下&#xff0c;如果系统不加管控&#xff0c;会造成多个音频流混音播放&#xff0c;容易让用户感到嘈杂&#xff0c;造成不好的用户体验。为了解决这个问题&#xff0c;系统预设了音频打断策略&#xff0c;对…...

编程日记 2024/8/13 14:26:09

c语言第12天

指针的引入 为函数修改实参提供支持。 为动态内存管理提供支持。 为动态数据结构提供支持。 为内存访问提供另一种途径。 指针概述 内存地址&#xff1a;系统为了内存管理的方便&#xff0c;将内存划分为一个个的内存单元&#xff08;1个内存单元占1个字 节&#xff09;&…...

编程日记 2024/8/13 14:25:07

回归预测|一种多输入多输出的粒子群优化支持向量机数据回归预测Matlab程序PSO-MSVR非for循环实现 原理上进行修改多输出

回归预测|一种多输入多输出的粒子群优化支持向量机数据回归预测Matlab程序PSO-MSVR非for循环实现 原理上进行修改多输出 文章目录 前言回归预测|一种多输入多输出的粒子群优化支持向量机数据回归预测Matlab程序PSO-MSVR非for循环实现 原理上进行修改多输出 一、PSO-MSVR模型1. …...

编程日记 2024/8/13 14:24:06

Claude in Excel：原生集成的AI表格协作者

1. 项目概述&#xff1a;这不是插件&#xff0c;是Excel里长出来的AI同事“Claude in Excel”这个标题刚看到时&#xff0c;我下意识点开几个技术社区翻了一圈&#xff0c;发现多数人第一反应是&#xff1a;“又一个AI插件&#xff1f;”——其实完全不是。它根本没走传统Offic…...

编程新知 2026/5/26 4:58:26

Unity Il2CppDumper原理与实战：解析元数据与二进制对齐

1. 这不是“破解工具”&#xff0c;而是Unity开发者该懂的二进制真相课 你刚在Unity Asset Store下载了一个功能惊艳的插件&#xff0c;却在打包iOS后发现部分逻辑失效&#xff1b;或者接手一个没有源码的旧项目&#xff0c;只有一堆 .dll 和 .so 文件&#xff0c;连主入口…...

编程新知 2026/5/26 4:52:25

别再只用Service了！ROS1 Action通信保姆级教程：从导航进度条到任务取消，手把手教你实现带反馈的机器人任务

别再只用Service了&#xff01;ROS1 Action通信保姆级教程&#xff1a;从导航进度条到任务取消&#xff0c;手把手教你实现带反馈的机器人任务当你的机器人正在执行一个长达10分钟的导航任务时&#xff0c;突然发现目标点设置错误&#xff0c;这时候如果只能干等着任务完成或者…...

编程新知 2026/5/26 2:59:49

从社交关系到分子结构：图解GCN（图卷积网络）到底在‘看’什么？

从社交关系到分子结构&#xff1a;图解GCN&#xff08;图卷积网络&#xff09;到底在‘看’什么&#xff1f;想象一下&#xff0c;你刚搬到一个新社区&#xff0c;想快速了解周围的邻居。最直接的方式是什么&#xff1f;不是挨家挨户敲门&#xff0c;而是通过社区活动认识几位关…...

编程新知 2026/5/26 2:11:27

收藏必看｜2026 版大厂 AI 岗位薪资曝光！普通程序员转型大模型最全指南

深夜收到大厂 HR 好友发来的内部资料&#xff0c;再三叮嘱切勿对外泄露。如今网络信息传播速度极快&#xff0c;这份 2026 年企业 AI 岗真实薪资内幕&#xff0c;也值得给广大程序员、零基础入行小白参考借鉴。 翻看完整薪资台账后&#xff0c;真切感受到当下大模型赛道的薪资差…...

编程新知 2026/5/26 2:03:15

双系统Ubuntu磁盘告急？别重装！用GParted无损扩容保姆级教程（附U盘启动盘制作）

双系统Ubuntu磁盘告急&#xff1f;别重装&#xff01;用GParted无损扩容保姆级教程&#xff08;附U盘启动盘制作&#xff09;当你在Windows和Ubuntu双系统环境下工作时&#xff0c;是否遇到过这样的窘境&#xff1a;当初安装时给Ubuntu分配的空间捉襟见肘&#xff0c;而Windows…...

编程新知 2026/5/26 0:12:06

关于psthon问题

我想问问各位 我python可以查到 但是我的bit文件查不到python怎么回事...

编程新知 2026/5/25 23:39:42

AI圈神秘领袖Ilya一幅画引爆全网，OpenAI三件大事暗示AGI时代将至？

AI圈神秘精神领袖Ilya在Instagram上传一幅画引发疯狂解读&#xff0c;与此同时&#xff0c;OpenAI连续公布数学成果、升级Codex、筹备IPO&#xff0c;释放AGI到来的强烈信号。Ilya画作引猜测Ilya上传的画中&#xff0c;罗丹的「思考者」踩在芯片Die Shot上&#xff0c;右下角签…...

编程新知 2026/5/25 23:25:13

sngan_projection论文解读：ICLR2018两大GAN技术的完美结合

sngan_projection论文解读&#xff1a;ICLR2018两大GAN技术的完美结合 【免费下载链接】sngan_projection GANs with spectral normalization and projection discriminator 项目地址: https://gitcode.com/gh_mirrors/sn/sngan_projection sngan_projection是一个实现了…...

编程新知 2026/5/25 22:04:16

NBTExplorer：让Minecraft数据编辑从专业工具变成人人可用的可视化平台

NBTExplorer&#xff1a;让Minecraft数据编辑从专业工具变成人人可用的可视化平台 【免费下载链接】NBTExplorer A graphical NBT editor for all Minecraft NBT data sources 项目地址: https://gitcode.com/gh_mirrors/nb/NBTExplorer 你是否曾经面对Minecraft世界文件…...

编程新知 2026/5/25 19:36:54