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

news2024/9/24 15:26:44

前言：

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