vue小练习之添加、删除信息行

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


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<div id="app">
			<fieldset>
				<legend>Create New Personlegend>
				<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>

vue小练习之添加、删除信息行_第1张图片
【总结】
1、

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

你可能感兴趣的:(vue)