shangrila-xiu

112
文章
101
分类
33
标签

messageBoard

简易留言板

1、简易留言板出现在qq、微博、博客等的软件或者网站上。下面先给出它的核心代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript" src="js/vue-resource.js" ></script>
	<script type="text/javascript" src="js/vue.js" ></script>
	<script type="text/javascript">
		window.onload=function(){
			new Vue({
				el:'.container',
				data:{
					t1:'',
					myData:[]
				},
				methods:{
					add:function(){
              			this.myData.unshift(this.t1) //myData添加数据
						this.t1=''; //将输入的数据清空 
                            
					}
				}
				
			});
		};
	</script>

2、为了使这个简单的页面变得更加的美观，再加上相关得css代码的文件：demo.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/*样式*/
body{
	padding: 0;
	margin: 0 auto;
	min-width: 805px;
}
.container{
	
}
.wrap{margin:100px;
min-width: 480px;}
/*标题样式*/
.header{
	border: 1px solid burlywood;
	background-color: #A5BCFF;
	color: white;
	font-family: "agency fb";
}
/*无内容时的样式*/
.noContent{
	border: 1px solid burlywood;
	background-color: #CCCCCC;
	font-size: 18px;
	font-family: "微软雅黑";
	height: 30px;
	text-align: center;
	
}
/*有内容时的样式*/
.content{
	margin-top: 10px;
	background-color: burlywood;
	border: 1px solid #A5BCFF;
	height: 200px;
	
}
.takeTextField{
	margin: 20px;
	border: 3px solid olivedrab;
	margin-top;10px;
	width: 560px;
	height: 60px;
	
}
.takeContent{
	margin-right: 80px;
	float: right;
}
#btn{
	
	margin-top: 150px;
	font-size: 20px;
	font-family: "微软雅黑";
	background-color: green;
	color: coral;
	border: 2px solid orange;
}
span{
	font-size: 20px;
	font-family: "微软雅黑";
}
/*接收到写出来的东西*/
.accept{
	height:auto ;
	border: 1px solid #A5BCFF;
	margin-top: 10px;
	background-color: burlywood;
}
#takeTextField{
	margin: 19px;
	border: 3px solid olivedrab;
	margin-top;10px;
	width: 1000px;
	height: 60px;
}
.page{
	float: right;
}
.page a{
	text-decoration: none;
}
@media only screen  and (max-width: 1006px) {
.takeContent{
	margin-right: 80px;
	float: right;
}
#btn{
	margin-top: 10px;
	font-size: 20px;
	font-family: "微软雅黑";
	background-color: green;
	color: coral;
	border: 2px solid orange;
}
span{
	font-size: 20px;
	font-family: "微软雅黑";
}
}
@media only screen  and (max-width: 805px) {
.takeContent{
	margin-right: 80px;
	float: right;
}
#btn{
	margin-top: 10px;
	font-size: 20px;
	font-family: "微软雅黑";
	background-color: green;
	color: coral;
	border: 2px solid orange;
}
span{
	font-size: 20px;
	font-family: "微软雅黑";
}
#takeTextField{
	margin: 19px;
	border: 3px solid olivedrab;
	margin-top;10px;
	width: 60px;
	height: 60px;
}
}
	.replyContent{line-height:24px;
	font-size:14px;
	color:#2b2b2b;
	font-family:"Microsoft YaHei";
	}

3、html的相关代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<body>
		<div class="container">
			<div class="wrap">
				<div class="header">
					<h2 align="center">留言板</h2>
				</div>
				
				<div class="content">
					<textarea class="takeTextField" v-model='t1' ></textarea>
					<div class="takeContent">
					<input type="button" id="btn" value="添加" @click='add'  />
					
					</div>
				</div>
				
				<div class="noContent" v-show="myData.length==0">暂无数据。。。。</div>
				<!--留言成功-->
				<div class="accept">
					<div id="takeTextField" v-for="val in myData" track-by=$index >
						<p class="replyContent">{{val}}</p>
					</div>
					
			</div>
			
		</div>
	</body>