Vue-demo（二）仿微博的发布和删除

用一个简单的微博demo实现Vue对html标签的插入和删除：

首先是一些简单的CSS样式：

	<style>
	*{
		margin: 0;
		padding: 0;
	}
	#box{
		padding: 0 100px;
		margin-top: 30px;
	}
	ul{
		margin-top: 30px;
	}
	li{
		background: #ddd;
		padding: 10px 30px;
		margin-bottom: 10px;
		position: relative;
		list-style: none;
		color: #666;
	}
	span{
		cursor: pointer;
		position: absolute;
		right: 30px;
	}
	input[type=text]{
		width: 70%;
		height: 35px;
	}
	button{
		width: 70px;
		height: 39px;
		position: relative;
		top: 1px;
		background: #ddd;
		outline: none;
		color: #666;
		cursor: pointer;
	}
	</style>

html：

		<div id="box">
			<input type="text" v-model="msg">
			<button @click="add">发布</button>
			<ul>
				<li v-for="(v,i) in arr">{{v}} <span @click="remove(i)">x</span></li>
			</ul>
		</div>

Vue组件：

		<script>
			new Vue({
				el:'#box',
				data:{
					msg:'',
					arr:['这是第一条微博','这是第二条微博','这是第三条微博']
				},
				methods:{
					add(){
						this.arr.unshift(this.msg);
						//以下错误写法，此时value的值是双向绑定的，要置空value要改变的是msg的值
						// document.getElementById("input").value=" "; 
						this.msg=" ";
					},
					remove(i){
						this.arr.splice(i,1);
						console.log(i)
					}
				}
			})
		</script>

最终效果：