【后端速成 Vue】实现动态表白墙
本期主要讲解：1、渲染列表2、删除功能3、添加功能4、统计清空5、完整代码
前言：
通过前面几篇的文章的讲解，已经学习到了很多的 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主动联系你。加油，计算机人！未来仍可期！
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献4条内容
所有评论(0)