Vue实现留言板功能

爱学习不爱上课的大学牲

已于 2023-12-11 17:45:20 修改

阅读量923

点赞数 13

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2023-12-11 17:42:53 首次发布

本文链接：https://blog.csdn.net/qq_57490170/article/details/134932564

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、继上次使用ElementUI实现了留言板，这次不使用组件库再实现一次

二、为什么要录制一个丑陋版本？

答：这个版本具有高度的可定制化，相比使用组件库，样式更灵活；而且实现更为简单，适合期末大作业。

页面效果：

代码实现：

msgBlock.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>index</title>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="msgBlock.css">
</head>

<body>
<div id="message_word">

    <h1>留言</h1>

    <div id="message_word_div1">
        <table id="message_word_table">
            <tr>
                <th>姓名</th>
                <th>手机号</th>
                <th>留言内容</th>
                <th>操作</th>
            </tr>

            <tr v-for="(comment,idx) in comments" :key="idx">
                <td>{{comment.name}}</td>
                <td>{{comment.phoneID}}</td>
                <td>{{comment.comment}}</td>
                <td>
                    <button @click="delThis(idx)">
                        删除
                    </button>
                </td>
            </tr>
        </table>
    </div>


    <div id="message_word_div2">
        <form action=""><br>
            留言者&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text"
                                                                                                v-model="name">
            <br><br>
            手机号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<input type="text" v-model="phoneID">
            <br><br>
            留言内容<br><br><textarea name="name" cols="30" rows="8" v-model="comment"></textarea>
            <button type="button" @click="commit">
                提交
            </button>
        </form>
    </div>

</div>
</body>

<script src="msgBlock.js"></script>
</html>

msgBlock.js

const vm = new Vue({
    data: {
        name: "",
        phoneID: "",
        comment: "",
        comments: [],
    },
    methods: {
        commit(e) {
            e.preventDefault();
            const cm = this.comments;

            cm.push({
                name: this.name,
                phoneID: this.phoneID,
                comment: this.comment,
            });

            this.name = "";
            this.phoneID = "";
            this.comment = "";
            this.comments = cm;
        },
        delThis(index) {
            this.comments.splice(index, 1);
        },
    },
});

vm.$mount('#message_word')

msgBlock.css

#message_word {
	margin: auto;
	margin-left: 185px;
	width: 1200px;
	height: 500px;
}

#message_word h1 {
	font-size: 45px;
	margin: auto;
	margin-top: 50px;
	margin-left: 30px;
	width: 100px;
}

#message_word_div1 {
	width: 800px;
	height: 100px;
	margin: auto;
	margin-top: -10px;
	margin-left: 400px;
}

#message_word_div2 form {
	font-size: 20px;
	margin: auto;
}

#message_word_div2 form textarea{
	font-size: 15px;
	margin: auto;
	margin-left: 20px;
	margin-top: -10px;
}

#message_word_div2 form button {
	background-color: blue;
	font-size: 25px;
	color: white;
	border-radius: 15px;
	margin-left: 70px;
	width: 150px;
}

#message_word_div2 {
	width: 300px;
	height: 400px;
	margin: auto;
	margin-left: 30px;
	margin-top: -50px;
	border: 3px solid black;
}

#message_word_div1 table {
	font-size: 18px;
}
#message_word_div1 table tr td button {
	font-size: 20px;
	color: white;
	border: 1px solid black;
	background-color: red;
	border-radius: 5px;
}

#message_word_div1 table th {
	width: 200px;
}

#message_word_div1 table tr td {
	text-align: center;
}