<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#upblock{
width: 600px;
margin: 0 auto;
}
#upblock input,#upblock select{
margin: 10px;
}
.downblock{
width: 598px;
border: 1px solid #DDDDDD;;
margin: 10px auto;
text-align: center;
}
.th{
background-color: #DDDDDD;;
}
fieldset{border: 1px solid #DDDDDD;;}
</style>
</head>
<body>
<!-- 上部分 --><div id="app">
<div id="upblock">
<fieldset>
<legend>学生系统</legend>
姓名:<input type="text" placeholder="请输入姓名" name="" v-model="newinfomation.name" v-on:keyup.enter="addstudent"><br>
性别:<select v-model="newinfomation.gender" >
<option value="男">男</option>
<option value="女">女</option>
</select><br>
年龄:<input type="number" placeholder="请输入年龄" name="" v-model="newinfomation.age" v-on:keyup.enter="addstudent"><br>
手机:<input type="number" placeholder="请输入手机" name="" v-model="newinfomation.phone" v-on:keyup.enter="addstudent"><br>
<button v-on:click="addstudent">创建新用户</button>
</fieldset>
</div>
<!-- 下部分 -->
<table class="downblock">
<thead class="th">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机</td>
<td>删除</td>
</tr>
</thead>
<tbody>
<tr v-for="(Student,index) in Students">
<td>{{Student.name}}</td>
<td>{{Student.gender}}</td>
<td>{{Student.age}}</td>
<td>{{Student.phone}}</td>
<td><button v-on:click="removeone(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
Students:[{name:"张三",gender:"男",age:18,phone:12352637286},
{name:"李四",gender:"女",age:19,phone:13572637286},
{name:"王五",gender:"男",age:12,phone:171237286},
{name:"赵柳",gender:"女",age:14,phone:14612637286},
{name:"嘟嘟",gender:"男",age:3,phone:115637286}],
newinfomation:{name:"",gender:"男",age:0,phone:""}
},
methods:{
addstudent:function(){
if(this.newinfomation.name===""){
alert("请输入姓名!");
return;
}
if(this.newinfomation.age<=0||this.newinfomation.age>=200){
alert("请输入正确的年龄!");
return;
}
if(this.newinfomation.phone.length<=0){
alert("请输入正确的手机号!");
return;
}
this.Students.unshift(this.newinfomation);
this.newinfomation={name:"",gender:"男",age:0,phone:""};
},
removeone:function(index){
this.Students.splice(index,1);
}
}
})
</script>
</body>
</html>
Vue小案例 学生系统
最新推荐文章于 2024-07-02 17:52:16 发布