vue小练习之添加、删除信息行_avue的menu删除行-CSDN博客

本文链接：https://blog.csdn.net/qq_34448522/article/details/84838574

做了一个添加、删除信息行的小练习，比较简单，上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<fieldset>
				<legend>Create New Person</legend>
				<div>
					<label>姓名：</label>
					<input type="text" v-model="newperson.name"/>
				</div>
				<div>
					<label>年龄：</label>
					<input type="text" v-model="newperson.age"/>
				</div>
				<div>
					<label>性别：</label>
					<select v-model="newperson.sex"/>
					<option value="男">男</option>
					<option value="女">女</option>
					</select>
				</div>
				<button @click="addPerson">添加成员</button>
			</fieldset>
			<table>
				<thead>
					<tr>
						<th>姓名</th>
						<th>姓名</th>
						<th>性别</th>
						<th>删除</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in person">
						<td>{{item.name}}</td>
						<td>{{item.age}}</td>
						<td>{{item.sex}}</td>
						<td><button @click="deletePerson(index)">删除</button></td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				newperson:{
					name:'',
					age:'',
					sex:'男'
				},
				person:[
				{
					name:'张三',
					age:'22',
					sex:'男'
				},
				{
					name:'李四',
					age:22,
					sex:'男'
				}
				]
			},
			methods:{
				addPerson:function(){
					this.person.push(this.newperson);
					this.newperson={name:'',age:null,sex:'男'};
				},
				deletePerson:function(index){
					this.person.splice(index,1);
				},
			}
		})
		</script>
</html>

在这里插入图片描述
【总结】
1、<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
2、<legend> 元素为 <fieldset>元素定义标题。
3、push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
4、splice() 方法用于添加或删除数组中的元素。