vue实现学生录入系统之添加删除功能实现学生录入系统之添加删除功能
一一.案例代码案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue指令综合案例</title>
<style>
#app{
margin: 50px auto;
width: 620px;
}
fieldset{
border: 2px solid plum;
margin-bottom: 20px;
}
fieldset input{
width: 200px;
height: 30px;
margin: 10px 0;
}
table{
width: 620px;
border: 2px solid plum;
text-align: center;
}
thead{
background-color: plum;
}
</style>
</head>
<body>
<div id="app">
<fieldset>
<legend>学生录入系统</legend>
<div>
<span>姓名：</span>
<input type="text" placeholder="请输入姓名" v-model="student.name"/>
<span></span>
</div>
<div>
<span>年龄：</span>
<input type="text" placeholder="请输入年龄" v-model="student.age"/>
</div>
<div>
<span>性别：</span>
<select v-model="student.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div>
<span>QQ：</span>
<input type="text" placeholder="请输入QQ" v-model="student.QQ"/>
</div>
<button @click="createNewStudent()">创建新用户</button>
</fieldset>
<table>
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>QQ</td>
<td>删除</td>
</tr>
</thead>
<tbody>
weixin_38725625
- 粉丝: 3
- 资源: 921
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
评论0