Vue点击添加数据时信息自动添加到你表格中（简单添加）

最新推荐文章于 2023-04-23 10:21:12 发布

2365741969

最新推荐文章于 2023-04-23 10:21:12 发布

阅读量3.6k

点赞数 1

文章标签： Vue添加数据

本文链接：https://blog.csdn.net/qq_44701475/article/details/103293277

版权

本文介绍了如何在Vue中实现点击按钮动态添加数据到表格中，包括数据的定义、表格展示以及关键的添加代码实现。

摘要由CSDN通过智能技术生成

1.数据
2.表格
3.相关代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#app{
				margin: 50px auto;
				width: 600px;
			}
			fieldset{
				border: 1px solid orangered;
			    margin-bottom: 20px;
		    }
			fieldset input{
				width: 200px;
				height: 20px;
				margin: 10px 0;
			}
			table{
				width: 600px;
				border: 2px solid orangered;
				text-align: center;
			}
			thead{
				background-color: orangered;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<fieldset>
				<legend>学生信息录入系统</legend>
				<div>
					<span>姓名：</span>
					<input type="text" placeholder="请输入姓名" v-model="newStudent.name"