1. 首页
  2. 新闻资讯
  3. 正文

vue实现简单评论功能

先看效果图吧！！！！
1.添加一条信息vue实现简单评论功能
vue实现简单评论功能
vue实现简单评论功能
接下来让我们看代码吧！

	<style type="text/css"> 			*{ 				padding: 0;margin: 0; 			} 			.box{ 				margin: 30px; 				width: 500px; 				height: 500px; 				display: flex; 			} 			p{ 				margin-top: 10px; 			} 			a{ 				text-decoration: none; 				float: right; 			} 			ul{ 				margin-left: 30px; 			} 			li{ 				width: 300px; 				white-space: nowrap; 				overflow: hidden; 				text-overflow: ellipsis; 				height: 50px; 				line-height: 50px; 				border:1px solid #CCCCCC; 				padding: 0 20px; 				list-style: none; 			} 			.speak{ 				margin-left: 30px; 			} 		</style> 	</head> 	<body> 	//html 		<div class="box"> 			<div class="user"> 			<p>用户名</p> 			<!-- @keyup监听键盘事件 --> 			<!-- @keyup.enter回车键获取值 --> 			<p><input v-model.trim="user" @keyup.enter="addItem()" type="text" placeholder="用户名" /></p> 			<p>吐槽内容</p> 			<p><textarea v-model="comm" @keyup.enter="addItem()" placeholder="吐槽内容"></textarea></p> 			<p><button type="button" @click="btn">提交</button></p> 			</div> 			 			 			<div class="speak"> 				<p>吐槽回复：</p> 				<ul v-for="(item,index) in list" :key="item.name"> 					<li>{{item.name}}说：{{item.txt}}<a href="#" @click="delItem(item)">删除</a></li> 				</ul> 			</div> 		</div> 		//js 		<script type="text/javascript"> 			new Vue({ 				el:".box", 				data(){ 					return{ 						// 评论用户以及内容的数据 						// name评论的用户名字 txt评论的内容 						list:[ 							{name:"tom",txt:"笑不活了"}, 							{name:"jarry",txt:"买了吧"}, 							{name:"小爱同学",txt:"可恶，有被装到"}, 							{name:"小一",txt:"鹅鹅鹅，曲项向天歌"} 						], 						user:"",//输入的名字存入 						comm:"",//评论存入 					} 				}, 				methods:{ 					// 点击按钮提交 					btn(){ 						var usercom={ 							name:this.user, 							txt:this.comm 						} 						this.list.unshift(usercom) 						this.user=""; 						this.comm=""; 					}, 					// 用户名方法事件 					addItem(){ 						// 创建用户名 						var item={ 							// 用户名字 						name:this.user, 						// 用户评论 						txt:this.comm, 						}; 						 						// 在list前面添加 item    unshift在前面添加 						this.list.unshift(item) 						 						// 清空user 						this.user=""; 						// 清空评论 						this.comm=""; 					}, 					//删除点击事件  获取元素 					delItem(item){ 						// 查找元素item在list里的下标 						var ind=this.list.findIndex(value=>value.name==item.name); 						//删除 						// splice 功能（从第几个元素，删除几个 添加内容） 						this.list.splice(ind,1); 					} 				} 			}) 		</script>

上一个：兽用疫苗和吃的东西冷藏在一起好吗（兽用疫苗和吃的东西冷藏在一起好吗）

下一个：动物疫苗前景分析（动物疫苗现状）

热门文章

归纳