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

最新推荐文章于 2024-04-18 08:17:16 发布

yazhiShaw

最新推荐文章于 2024-04-18 08:17:16 发布

阅读量2k

点赞数 3

分类专栏： Vue 文章标签： Vue 微博发布 Vue删除和增加 Vue入门

本文链接：https://blog.csdn.net/weixin_39357177/article/details/81504417

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

用一个简单的微博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>

最终效果：