先看效果图吧!!!!
1.添加一条信息因为用了键盘事件,所以当我们按下enter键时,同样会触发添加事件
添加以后的效果
删除所有评论信息
接下来让我们看代码吧!

	<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>
Logo

前往低代码交流专区

更多推荐