要实现图中的功能：
- 其中的数据是在代码中给出的
- 删除添加功能都可以使用
- 为填入信息会弹出提示框
效果图
空名字
空年龄
<body>
<div id="app">
<!--第一部分-->
<fieldset>
<legend>学生信息录入系统</legend>
<div>
<span>姓名：</span>
<input type="text" placeholder="请输入姓名" v-model="newStudent.name">
</div>
<div>
<span>性别：</span>
<select v-model="newStudent.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div>
<span>年龄：</span>
<input type="text" placeholder="请输入年龄" v-model="newStudent.age">
</div>
<div>
<button @click="creatNewStudent()">添加新用户</button>
</div>
</fieldset>
<!--第二部分-->
<table>
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>删除</td>
</tr>
</thead>
<tbody>
<tr v-for="(p, index) in persons">
<td>{{p.name}}</td>
<td>{{p.sex}}</td>
<td>{{p.age}}</td>
<td>
<button @click="deleteStu(index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
persons:[
{name: '张三', sex: '女', age:'12'},
{name: '李四', sex: '男', age:'16'},
{name: '王五', sex: '女', age:'26'},
{name: '赵六', sex: '男', age:'45'}
],
newStudent: {name: '', sex: '男', age:'0'}
},
methods:{
creatNewStudent(){
if(this.newStudent.name === ''){
alert('姓名不能为空');
return;
}
if(this.newStudent.age <= 0){
alert('请填写正确年龄');
return;
}
this.persons.unshift(this.newStudent);
},
deleteStu(index){
this.persons.splice(index,1);
}
}
});
</script>
</body>
<style>
#app{
margin: 50px auto;
width: 600px;
}
fieldset{
border: 1px solid orangered;
}
fieldset input{
width: 200px;
height: 30px;
margin: 10px 0;
}
table{
width: 600px;
border: 2px solid orangered;
text-align: center;
}
thead{
background-color: orangered;
}
</style>
网友评论