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

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

news 2025/7/8 16:08:53

前言：

通过前面几篇的文章的讲解，已经学习到了很多的 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】实现动态表白墙

1、渲染列表

2、删除功能

3、添加功能

4、统计清空

5、完整代码

6、更多建议

相关文章：

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

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

Table表格控件实现单选功能

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

Python爬虫开发：BeautifulSoup、Scrapy入门

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

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

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

Laravel + Thinkphp 生成二维码

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

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

adb Connection reset by peer的解决方法

111111111

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

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

React学习-jsx语法

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

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

c语言第12天

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

Java 语言特性(面试系列2)

Linux 文件类型，目录与路径，文件与目录管理

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

从WWDC看苹果产品发展的规律

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

汽车生产虚拟实训中的技能提升与生产优化

Ascend NPU上适配Step-Audio模型

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

自然语言处理——循环神经网络

大学生职业发展与就业创业指导教学评价