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

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

news 2025/7/21 14:00:56

前言：

通过前面几篇的文章的讲解，已经学习到了很多的 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 没有什么难度，重点是练习前面学习的指令，建议看完这个功能之后，自己能写出来一个类似的，这样就能很好的巩固指令的知识点了。