vue练习 v-model @click v-for

最新推荐文章于 2024-07-07 16:54:40 发布

t_面海

最新推荐文章于 2024-07-07 16:54:40 发布

阅读量299

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/m0_47291803/article/details/113211127

版权

使用 v-model @click v-for编写了简单的发布功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			#app{width: 300px;height: 500px;margin: 200px auto;}
			.sss{border: 1px solid rgba(135,206,250,.5);}
			.bl{border-bottom: 1px solid rgba(135,206,250,.5);color: gray;}
			input{outline: none;}
			.fabu {margin: 30px 0;}
			.fabu div{display: flex;width: 100%;}
			.fabu div input{width: 50%;border: 2px solid rgba(	135,206,250,.5);}
			.fabu div input::-webkit-input-placeholder{color:rgba(	250,128,114,.5);padding-left: 10px;}
			.fabu div button{width: 100%;border: none;background:rgba(	135,206,250,.5) ;color: white;outline: none;}
			.fabu div button:hover{background:rgba(	135,206,250,1) ;}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="sss">
				<div v-for="(item,index) in msglist" class="bl">
				<p>标题:{{item.title}}</p>
				<article>内容:{{item.content}}</article>
			</div>
			</div>
			
			<div class="fabu">
				<div>
					<input v-model="wo" placeholder="请输入标题"/>
					<input v-model="ni" placeholder="请输入内容"/>				
				</div>
				<div>
					<button @click="add()">发布</button>
				</div>
			</div>
				
			
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				wo:"",
				ni:"",
				msglist:[
				{title:"",content:""}
				]
			},
			methods:{
				add(){
					this.msglist.push({title:this.wo,content:this.ni})
				}
			}
		})
	</script>
</html>