<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<fieldset>
<legend>信息录入</legend>
<div>
<label>
name:
<input type="text" placeholder="name" v-model.trim="newPerson.name">
</label>
</div>
<div>
<label>
age:
<input type="text" placeholder="age" v-model.trim="newPerson.age">
</label>
</div>
<div>
<label>
phone:
<input type="text" placeholder="phone" v-model.trim="newPerson.phone">
</label>
</div>
<div>
<label>
sex:
<select v-model="newPerson.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</label>
</div>
<button @click="addPerson">add</button>
</fieldset>
<table border="1">
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>手机</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr v-for="(person,index) in persons" :key="person.id">
<td>{{person.id}}</td>
<td>{{person.name}}</td>
<td>{{person.sex}}</td>
<td>{{person.age}}</td>
<td>{{person.phone}}</td>
<td><button @click="delPerson(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.3.2.2.js"></script>
<script>
// 1、创建Vue的实例对象
const app = Vue.createApp({
data(){//定义数据
return {
msg:'你好！',
persons:[
{id:1,name:'张三',age:20,sex:'男',phone:'13333333333',friends:['李四','王五']},
{id:2,name:'李四',age:24,sex:'女',phone:'13333333334',friends:['张三','王五']},
{id:3,name:'王五',age:28,sex:'男',phone:'13333333335',friends:['李四','张三']}
],
newPerson:{name:'',age:'',sex:'男',phone:'',friends:[]}
}
},
methods:{
delPerson(index){
this.persons.splice(index,1);
},
addPerson(){
const {name,age,sex,phone} = this.newPerson;
if(!name || !age || !sex || !phone){
alert("数据不完整");
return;
}
this.persons.push(this.newPerson;
this.newPerson = {name:'',age:'',sex:'男',phone:'',friends:[]};
}
}
}).mount('#app');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<fieldset>
<legend>信息录入</legend>
<div>
<label>
name:
<input type="text" placeholder="name" v-model.trim="newPerson.name">
</label>
</div>
<div>
<label>
age:
<input type="text" placeholder="age" v-model.trim="newPerson.age">
</label>
</div>
<div>
<label>
phone:
<input type="text" placeholder="phone" v-model.trim="newPerson.phone">
</label>
</div>
<div>
<label>
sex:
<select v-model="newPerson.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</label>
</div>
<button @click="addPerson">add</button>
</fieldset>
<table border="1">
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>手机</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr v-for="(person,index) in persons" :key="person.id">
<td>{{person.id}}</td>
<td>{{person.name}}</td>
<td>{{person.sex}}</td>
<td>{{person.age}}</td>
<td>{{person.phone}}</td>
<td><button @click="delPerson(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.3.2.2.js"></script>
<script>
// 1、创建Vue的实例对象
const app = Vue.createApp({
data(){//定义数据
return {
msg:'你好！',
persons:[
{id:1,name:'张三',age:20,sex:'男',phone:'13333333333',friends:['李四','王五']},
{id:2,name:'李四',age:24,sex:'女',phone:'13333333334',friends:['张三','王五']},
{id:3,name:'王五',age:28,sex:'男',phone:'13333333335',friends:['李四','张三']}
],
newPerson:{name:'',age:'',sex:'男',phone:'',friends:[]}
}
},
methods:{
delPerson(index){
this.persons.splice(index,1);
},
addPerson(){
const {name,age,sex,phone} = this.newPerson;
if(!name || !age || !sex || !phone){
alert("数据不完整");
return;
}
this.persons.push(this.newPerson;
this.newPerson = {name:'',age:'',sex:'男',phone:'',friends:[]};
}
}
}).mount('#app');
</script>
</body>
</html>
