Vue开发的简单留言板

用Vue写了个很简单的留言板，用了localStorage数据存储

<script src="//cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>
<style>
	body {
		text-align: center;
		padding: 0;
		margin: 0;
		background-color: #efefef;
	}
	
	ul,
	li {
		list-style: none;
	}
	
	* {
		padding: 0;
		margin: 0;
	}
	
	.form,
	.list {
		width: 500px;
		border: 1px solid #ddd;
		background-color: #fff;
		margin: 0 auto;
		padding: 20px;
		margin-top: 20px;
		border-radius: 5px;
		overflow: hidden;
	}
	
	.form li {
		text-align: left;
		font-size: 14px;
		margin-bottom: 20px;
	}
	
	.form li input {
		width: 200px;
		height: 20px;
	}
	
	.form li textarea {
		width: 450px;
		height: 100px;
		vertical-align: top;
	}
	
	.form li button {
		background-color: #0082E6;
		color: #fff;
		width: 80px;
		height: 28px;
		text-align: center;
		line-height: 28px;
		border: none;
		border-radius: 3px;
		cursor: pointer;
	}
	
	.list li {
		font-size: 12px;
		padding-bottom: 10px;
		padding-top: 10px;
		line-height: 24px;
		float: left;
		width: 100%;
		border-bottom: 1px dotted #ddd;
	}
	
	.list li span {
		float: left;
		width: 80px;
		text-align: left;
		color: #11B95C;
	}
	
	.list li em {
		font-style: normal;
		float: left;
		width: 400px;
		text-align: left;
	}
	
	.list li i {
		color: red;
		cursor: pointer;
		font-style: normal;
	}
</style>
<div id="app">
	<div class="form">
		<ul>
			<li>用户：<input type="text" placeholder="输入用户" v-model='addForm.name' /></li>
			<li>内容：<textarea placeholder="输入内容" v-model='addForm.content'></textarea></li>
			<li><button @click.prevent='addData'>提交</button></li>
		</ul>
	</div>
	<div class="list">
		<ul>
			<li v-for="(item,index) in items">
				<span>{{item.name}} <i @click="del(index)">X</i></span>
				<em style='white-space: pre' v-text='item.content'></em>
			</li>
		</ul>
	</div>
</div>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			items: [],
			addForm: {
				name: '',
				content: '',
			},
		},
		methods: {
			addData() {
				if(this.addForm.name.trim() != "" && this.addForm.content.trim() != "") {
					this.items.push(this.addForm);
					this.addForm = {
						name: '',
						content: '',
					}
					window.localStorage.setItem("items", JSON.stringify(this.items))
				} else {
					alert("用户和内容不能为空！");
				}
			},
			del(i) {
				this.items.splice(i, 1);
				window.localStorage.setItem("items", JSON.stringify(this.items))
			}
		},
		mounted() {
			if(window.localStorage.getItem("items")) {
				this.items = JSON.parse(window.localStorage.getItem("items"));
			}
		}
	})
</script>

欢迎分享本文，转载请保留出处：前端ABC » Vue开发的简单留言板