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

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

news 文章来源：https://blog.csdn.net/m0_61784621/article/details/131686534 2025/5/3 15:52:04

前言：

通过前面几篇的文章的讲解，已经学习到了很多的 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

《花100块做个摸鱼小网站! 》第二篇—后端应用搭建和完成第一个爬虫

一、前言 大家好呀&#xff0c;我是summo&#xff0c;前面已经教会大家怎么去阿里云买服务器&#xff08;链接在这&#xff0c;需要自取&#xff1a;https://developer.aliyun.com/huodong/dashiblogger?userCodemtbtcjr1&#xff09;&#xff0c;以及怎么搭建JDK、Redis、My…...

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

Mapreduce_csv_averageCSV文件计算平均值

csv文件求某个平均数据 查询每个部门的平均工资&#xff0c;最后输出 数据处理过程 employee_noheader.csv&#xff08;没做关于首行的处理&#xff0c;运行时请自行删除&#xff09; EmployeeID,EmployeeName,DepartmentID,Salary 1,ZhangSan,101,5000 2,LiSi,102,6000…...

编程日记 2024/8/13 14:21:02

将UEC++项目转码成UTF-8

方法一 如果文件不多的话&#xff0c;可以手动一个一个进行修改。添加 “高级保存选项” 手动改为UTF-8 方法二 使用editorconfig文件&#xff0c;统一编码问题。通过&#xff1a;“工具” > “选项”>"文本编辑器" > "C/C" > "代码样式…...

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

深入探索MySQL C API：使用C语言操作MySQL数据库

目录 引言 一. MySQL C API简介 二. MySQL C API核心函数 2.1 初始化和连接 2.2 配置和执行 2.3 处理结果 2.4 清理和关闭 2.5 错误处理 三. MySQL使用过程 四. 实现CRUD操作 4.1 创建数据库并建立表 ​编辑 4.2 添加数据&#xff08;Create&#xff09; ​编辑 …...

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

武汉流星汇聚：亚马逊助力跨境电商扬帆起航，海外影响力显著提升

在全球化浪潮的推动下&#xff0c;跨境电商已成为连接世界市场的重要桥梁。而在这场跨越国界的商业盛宴中&#xff0c;亚马逊作为全球电商的领军者&#xff0c;以其独特的商业模式、庞大的用户基础&#xff0c;为无数企业提供了前所未有的发展机遇。武汉流星汇聚电子商务有限公…...

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

C语言：设计模式

C语言和设计模式&#xff08;总结篇&#xff09; 书籍&#xff1a;《大话设计模式》 2、C语言和设计模式&#xff1a;原型模式&#xff08;复制自己&#xff0c;生成另外一个实例对象&#xff09; 17、C语言实现面向对象编程 : 封装、继承、多态 ---- C语言可&#xff1a;封…...

编程日记 2024/8/13 14:15:56

Pandas数据选择的艺术：深入理解loc和iloc

在数据科学领域&#xff0c;Pandas是处理和分析数据的瑞士军刀。掌握Pandas中的数据选择技巧&#xff0c;尤其是loc和iloc的使用&#xff0c;对于提高数据处理效率至关重要。本文将深入探讨loc和iloc的用法&#xff0c;通过丰富的示例&#xff0c;帮助你精确地选取所需的数据&a…...

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

＜数据集＞固定视角监控牧场绵羊识别数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;3615张 标注数量(xml文件个数)&#xff1a;3615 标注数量(txt文件个数)&#xff1a;3615 标注类别数&#xff1a;1 标注类别名称&#xff1a;[Sheep] 序号类别名称图片数框数1Sheep361529632 使用标注工具&#…...

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

浙大数据结构慕课课后题（06-图2 Saving James Bond - Easy Version）(拯救007)

题目要求&#xff1a; This time let us consider the situation in the movie "Live and Let Die" in which James Bond, the worlds most famous spy, was captured by a group of drug dealers. He was sent to a small piece of land at the center of a lake fi…...

编程日记 2024/8/13 14:12:52

前置(1):npn 和yarn ，pnpm安装依赖都是从那个源安装的啊，有啥优缺点呢

在使用 npm、yarn 或 pnpm 进行依赖管理和安装时&#xff0c;它们通常默认从 npm 的公共仓库&#xff08;https://registry.npmjs.org/&#xff09;获取包。不过&#xff0c;用户可以配置它们以从其他源获取&#xff0c;例如企业内部的私有仓库或镜像站点&#xff08;如淘宝的 …...

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