一、继上次使用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>
留言者 <input type="text"
v-model="name">
<br><br>
手机号  <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;
}