vue增加删除数据

最新推荐文章于 2024-05-16 02:26:50 发布

蔡大毛

最新推荐文章于 2024-05-16 02:26:50 发布

阅读量2.5k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43853424/article/details/88350884

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

首先，放上结构

<style>
			*{
			  margin: 0;
			  padding: 0;
			  list-style: none;
			}
			fieldset{
				height: 330px;
				width: 800px;
				margin: 0 auto;
				border: 1px solid #009A61;
			}
			p{
				margin: 0 auto;
				width: 600px;
			}
			input{
				height: 40px;
			}
			select{
				height: 30px;
				width: 50px;
			}
			fieldset p:nth-of-type(1){
				margin-top: 40px;
			}
			fieldset p:nth-of-type(2){
				margin: 30px auto;
			}
			.est{
				margin-top: 20px;
				margin-left: 130px;
				width: 60px;
				height: 40px;
				background: #009A61;
				color: white;
				border: none;
			}
			table{
				width: 804px;
				margin: 0 auto;
				border-collapse: collapse;
			}
			thead tr:nth-of-type(1){
				text-align: center;
				height: 40px;
				color: white;
				background:  #009A61;
			}
			td{
				border: 1px solid #D3D3D3;
			}
			#box tr{
				height: 35px;
				text-align: center;
			}
			#box tr td:nth-of-type(4){
				justify-content: center;
			}
			.delet{
				margin-left: 5px;
				width: 40px;
				height: 30px;
				background:  #009A61;
				border: none;
				color: white;
			}
			.xiugai{
				width: 40px;
				height: 30px;
				background-color: #009A61;
				padding: 0;
				border-radius: 0;
				border: 0;
			}
			.xiugai:hover{
				background-color: #009A61;
			}
		</style>
	</head>
	<body>
		<div id="div">
			 <fieldset>
				<legend>创建类目</legend>
				<p>
					<label>名字</label>
					<input type="text" class="na" v-model="newArr.name">
				</p>
				<p>
					<label>年龄</label>
					<input type="text" class="age"v-model="newArr.age">
				</p>
				<p>
					<label>性别</label>
					<select class="gen" v-model="newArr.sex">
						<option value="男">男</option>
						<option value="女">女</option>
					</select>
				</p>
				<button class="est" @click="cj">创建</button>
			</fieldset>
			<table>
				<thead>
					<tr>
						<td>姓名</td>
						<td>年龄</td>
						<td>性别</td>
						<td>删除</td>
					</tr>
				</thead>
				<tbody id="box">
					<tr v-for="(a,index) in people">
						<td>{{a.name}}</td>
						<td>{{a.age}}</td>
						<td>{{a.sex}}</td>
						<td>
							<button class="delet" @click="Delete(index)">删除</button>
							<button  type="button" class="btn btn-primary xiugai" data-toggle="modal" data-target="#exampleModal" >修改</button>
						
						</td>
					</tr>
				</tbody>
			</table>
		</div>

在这里插入图片描述
vue

<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el:"#div",
				data:{
					people:[{
						name:'小明',
						age:10,
						sex:'男'
					},{
						name:'小红',
						age:12,
						sex:'女'
					}],
					newArr:{
						name:"",
						age:"",
						sex:"",
					},
				},
				methods:{
					cj(){
					   let obj={};
					   obj=JSON.stringify(this.newArr);
					   this.people.push(JSON.parse(obj));
					   this.newArr.name=''
					   this.newArr.age=''
					  
					},
					Delete(index){
						this.people.splice(index,1)
					},
					
					
				}
				
			})
		</script>

这样就可以实现数据的添加与删除了，主要还是数据的调用。

蔡大毛

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue增加删除数据

首先，放上结构&lt;style&gt; *{ margin: 0; padding: 0; list-style: none; } fieldset{ height: 330px; width: 800px; margin: 0 auto; border: 1px solid #009A61; } p{...
复制链接

扫一扫