vue学习笔记【七、实现用户信息的删除与添加】

<template>
	<div id="app">
		<fieldset>
			<div>
				<span>姓名：</span>
				<!--数据双向绑定-->
				<input type="text" placeholder="姓名" v-model="newPerson.name"/>
			</div>
		
			<div>
				<span>年龄：</span>
				<input type="text" placeholder="年龄" v-model="newPerson.age"/>
			</div>
			<button @click="createNewPerson">创建用户</button>
		</fieldset>
		<table>
			<thead>
			<tr>
				<td>姓名</td>
				<td>性别</td>
				<td>删除</td>
			</tr>
			</thead>
			
			<tbody>
				<tr v-for="(p,index) in persons">
					<td v-text="p.name"></td>
					<td v-text="p.age"></td>
					<td>
						<button @click="del(index)">删除</button>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
	export default{
		name:"ComputedAndWatch",
		data(){
			return {
				persons:[
					{name:'aa',age:23},
					{name:'bb',age:33},
					{name:'cc',age:13},
					{name:'dd',age:93}
				],
				newPerson:{name:'',age:0}
			}
		},
		methods:{
			//添加用户
			createNewPerson(){
				//1.数据校验
				let {name,age} = this.newPerson;
				if (name===''){
					alert('姓名不能为空！');
				}
				else if (age<=0){
					alert('年龄不正确！');
				}
				else{
					//2.插入数据(插入到第一行)
					this.persons.unshift(this.newPerson);
					
					//3.插入后清空数据
					this.newPerson = {name:'',age:0};
				}
			},
			
			//删除用户
			del(index){
				this.persons.splice(index,1);
			}
		}
		
	}
</script>

<style scoped>
	#app{
		margin: 50px auto;
		width: 600px;
	}
	
	fieldset{
		border: 1px solid red;
		margin-bottom: 20px;
	}
	
	fieldset input{
		margin: 10px 0;
		width: 200px;
		height: 30px;
	}
	
	table{
		width: 600px;
		border: 1px solid red;
		text-align: center;
	}
	
	thead{
		background-color: orangered;
	}
</style>