使用原生js开发

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style type="text/css">
        body {
            text-align: center;
            background: #ddd;
        }

        .message-board {
            background: #fff;
            margin: 0px auto;
            width: 1000px;
            text-align: left;
            padding: 20px;
        }

        .no-data {
            color: rgb(63, 63, 63);
            text-align: center;
        }

        .message-item {
            border-bottom: 1px solid #ddd;
            padding: 10px;
        }

        .message-item .nick-name {
            color: rgb(81, 80, 80);
            font-size: 14px;
        }

        .send-time {
            margin-left: 10px;
            font-size: 13px;
        }

        .del {
            cursor: pointer;
            color: red;
            margin-left: 10px;
        }

        .message-item .message {
            margin-top: 5px;
        }

        .part-title {
            font-size: 18;
            border-left: 2px solid rgb(16, 106, 202);
            padding-left: 10px;
            font-weight: bold;
            margin-top: 10px;
        }

        .input-panel {
            display: flex;
            align-items: center;
            margin-top: 5px;
        }

        .input-panel textarea {
            height: 50px;
            width: 100%;
            flex: 1;
            padding: 0px;
            resize: none;
        }

        .input-panel .send-btn {
            width: 51px;
            height: 51px;
            line-height: 50px;
            background: rgb(8, 141, 194);
            color: #fff;
            text-decoration: none;
            text-align: center;
            margin-left: 10px;
        }
    </style>
    <script type="text/javascript">
        const messageList = [];
        const render = () => {
            const messageListDom = document.querySelector("#message-list");
            messageListDom.innerHTML = "";
            messageList.forEach((item, index) => {
                const messageItem = document.createElement("div");
                messageItem.setAttribute("class", "message-item");
                messageListDom.appendChild(messageItem);

                const nickNameDom = document.createElement("div");
                nickNameDom.setAttribute("class", "nick-name");
                messageItem.appendChild(nickNameDom);

                //昵称
                const nameSpan = document.createElement("span");
                nameSpan.innerHTML = item.nickName;
                nickNameDom.appendChild(nameSpan);

                //时间
                const timeSpan = document.createElement("span");
                timeSpan.setAttribute("class", "send-time");
                timeSpan.innerHTML = item.sendTime;
                nickNameDom.appendChild(timeSpan);

                //删除
                const delSpan = document.createElement("span");
                delSpan.setAttribute("class", "del");
                delSpan.innerHTML = "删除";
                delSpan.addEventListener("click", () => {
                    delMessage(index);
                });
                nickNameDom.appendChild(delSpan);

                const messageDom = document.createElement("div");
                messageDom.setAttribute("class", "message");
                messageDom.innerHTML = item.message;
                messageItem.appendChild(messageDom);
            })
            if (messageList.length == 0) {
                const noData = document.createElement("div");
                noData.setAttribute("class", "no-data");
                noData.innerHTML = "暂无留言，请留言";
                messageListDom.appendChild(noData);
            }
        }

        const sendMsg = () => {
            const nickNameDom = document.querySelector("#nick-name-input");
            const messageDom = document.querySelector("#message-input");
            const nickNameDomValue = nickNameDom.value.trim();
            const messageDomValue = messageDom.value.trim();
            if (nickNameDomValue === "") {
                alert("请输入昵称");
                return;
            }
            if (messageDomValue === "") {
                alert("请输入留言内容");
                return;
            }
            messageList.push({
                nickName: nickNameDomValue,
                message: messageDomValue,
                sendTime: new Date().toLocaleString()
            })
            nickNameDom.value = "";
            messageDom.value = "";
            render();
        }

        //删除留言
        const delMessage = (index) => {
            messageList.splice(index, 1);
            render();
        }
    </script>
</head>

<body>
    <div class="message-board">
        <div class="part-title">留言列表</div>
        <div id="message-list">
            <div class="no-data">暂无留言，请留言</div>
            <!--  <div class="message-item">
                <div class="nick-name">
                    <span>昵称</span>
                    <span class="send-time">2023-02-08 12:41</span>
                    <span class="del" onclick="delMessage()">删除</span>
                </div>
                <div class="message">
                    留言内容留言内容留言内容留言内容留言内容留言内容
                </div>
            </div> -->
        </div>
        <div class="part-title">发送留言</div>
        <div class="form-panel">
            <form>
                <div class="user-name">
                    昵称：<input type="input" id="nick-name-input" />
                </div>
                <div class="input-panel">
                    <div>留言：</div>
                    <textarea id="message-input"></textarea>
                    <a href="javascript:void(0)" onclick="sendMsg()" class="send-btn">发送</a>
                </div>
            </form>
        </div>
    </div>
</body>

</html>

使用vue3开发

<template>
  <div>
    <div class="message-board">
      <div class="part-title">留言列表</div>
      <div id="message-list">
        <div class="no-data" v-if="messageList.length == 0">
          暂无留言，请留言
        </div>
        <div class="message-item" v-for="(item, index) in messageList">
          <div class="nick-name">
            <span>{{ item.nickName }}</span>
            <span class="send-time">{{ item.sendTime }}</span>
            <span class="del" @click="delMessage(index)">删除</span>
          </div>
          <div class="message">
            {{ item.message }}
          </div>
        </div>
      </div>
      <div class="part-title">发送留言</div>
      <div class="form-panel">
        <form>
          <div class="user-name">
            昵称：<input
              type="input"
              id="nick-name-input"
              v-model.trim="nickName"
            />
          </div>
          <div class="input-panel">
            <div>留言：</div>
            <textarea id="message-input" v-model="message"></textarea>
            <a href="javascript:void(0)" @click="sendMsg()" class="send-btn"
              >发送</a
            >
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const messageList = ref([]);

const nickName = ref();
const message = ref();

const sendMsg = () => {
  const nickNameDomValue = nickName.value;
  const messageDomValue = message.value.trim();
  if (nickNameDomValue === "") {
    alert("请输入昵称");
    return;
  }
  if (messageDomValue === "") {
    alert("请输入留言内容");
    return;
  }
  messageList.value.push({
    nickName: nickNameDomValue,
    message: messageDomValue,
    sendTime: new Date().toLocaleString(),
  });
  nickName.value = "";
  message.value = "";
};

const delMessage = (index) => {
  messageList.value.splice(index, 1);
};
</script>

<style lang="scss" >
body {
  text-align: center;
  background: #ddd;
}

.message-board {
  background: #fff;
  margin: 0px auto;
  width: 1000px;
  text-align: left;
  padding: 20px;
}

.no-data {
  color: rgb(63, 63, 63);
  text-align: center;
}

.message-item {
  border-bottom: 1px solid #ddd;
  padding: 10px;
}

.message-item .nick-name {
  color: rgb(81, 80, 80);
  font-size: 14px;
}

.send-time {
  margin-left: 10px;
  font-size: 13px;
}

.del {
  cursor: pointer;
  color: red;
  margin-left: 10px;
}

.message-item .message {
  margin-top: 5px;
}

.part-title {
  font-size: 18;
  border-left: 2px solid rgb(16, 106, 202);
  padding-left: 10px;
  font-weight: bold;
  margin-top: 10px;
}

.input-panel {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

.input-panel textarea {
  height: 50px;
  width: 100%;
  flex: 1;
  padding: 0px;
  resize: none;
}

.input-panel .send-btn {
  width: 51px;
  height: 51px;
  line-height: 50px;
  background: rgb(8, 141, 194);
  color: #fff;
  text-decoration: none;
  text-align: center;
  margin-left: 10px;
}
</style>

可以发现，使用vue这样的高级框架能提高我们的开发效率，我们只需要关注数据的处理，无需关注页面动态渲染。