vue 简单对话框

最新推荐文章于 2024-05-31 15:44:18 发布

想喝橙汁儿

最新推荐文章于 2024-05-31 15:44:18 发布

阅读量1.2k

点赞数 31

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46328144/article/details/108274564

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

初学者 vue 的简单对话框

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h1>欢迎来到吐槽大厅</h1>
		<div id="app">
			吐槽者：<input type="text" v-model="user" /><br>
			内容 ：<input type="text" v-model="con" value="" /><br>
			
			<button type="button" @click="obj()">提交</button><br>
			<p>吐槽回复：</p>
			<div class="box" v-for="(item,index) in list">
				<span>{{item.name}}：{{item.speak}}</span>
				<button @click="del(index)">删除</button>
			</div>
			
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					user:'',
					con:'',
					list:[
						{"name":"小花","speak":"你个大傻子"},
						{"name":"花花","speak":"乖乖的"}
					]
				},
				methods:{
					obj(){
						if(this.user!='' && this.con!=''){
							this.list.unshift({"name": this.user,"speak":this.con});//添加数据
							this.user='';//清空输入框
							this.con='';
						}
					},
					del(index){
						// console.log(this.list[index])
						this.list.splice(index,1);//删除
					}
					
				}
			})
			
			
			
		</script>
		
		
	</body>
</html>

想喝橙汁儿

关注

31
点赞
踩
2

收藏

觉得还不错? 一键收藏
17
评论
vue 简单对话框

初学者 vue 的简单对话框代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <h1>
复制链接

扫一扫