戶籍管理系統Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>戶籍管理系統</title>
<style>
fieldset{
margin: 0 auto;
border:1px solid black;
width:500px;
height:180px;
}javascript
.register{
width:84px;
height:28px;
border:none;
background-color:"black";
border-radius:7px;
color:white;
}html
.delone{
width:45px;
height:28px;
border:none;
background-color:"black";
border-radius:7px;
color:white;
}vue
.table1{
border:1px solid black;
border-collapse:collapse;
width:500px;
height:190px;
margin: 0 auto;java
}
th{
border:1px solid black;
font-size:12px;
background-color:gray;
height:25px;app
}
.table3{
text-align:center;
font-size:12px;
height:25px;
}
</style>
</head>
<body>
<div id="app">
<fieldset>
<legend>戶籍管理系統</legend>
<table id="table2">
<tr id="name1">
<td>
<label>姓名:</label>
<input type="text" placeholder="請輸入用戶名" v-model="newperson.name"></input>
</td>
</tr>
<tr id="age1">
<td>
<label>年齡:</label>
<input type="number" placeholder="請輸入年齡" v-model="newperson.age"></input>
</td>
</tr>
<tr id="sex1">
<td>
<label>性別:</label>
<select v-model="newperson.sex">
<option>男</option>
<option>女</option>
</select>
</td>
</tr>
<tr id="phone">
<td>
<label>手機:</label>
<input type="text" placeholder="請輸入手機號" v-model="newperson.phone"></input>
</td>
</tr>
<tr id="creatNew">
<td class="register">
<button @click="addone">建立新用戶</button>
</td>
</tr>
</table>
</fieldset>ui
<br/>
<table class="table1">
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>手機</th>
<th>刪除</th>
</tr>
</thead>
<tbody class="table3">
<tr v-for="(item,index) in persons">
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.age}}</td>
<td>{{item.phone}}</th>
<td><button @click="delone(index)">刪除</button></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script>
var VM= new Vue({
el:"#app",
data:{
persons:[
{name:"張三",age:"16",sex:"男",phone:"53163737"},
{name:"張四",age:"17",sex:"男",phone:"38283738"},
{name:"張五",age:"18",sex:"女",phone:"83483893"}
],
newperson :{name:"",age:0,sex:"男",phone:""}
},
methods:{
addone(){
if(!this.newperson.name==''){
return this.persons.unshift(this.newperson)
}else{
alert("不能爲空")
}
},
delone(index){
this.persons.splice(index,1)
}
}
});
</script>this
</body>
</html>3d
簡單的效果展現：htm
咱們來增長一條新的用戶數據；blog
點擊建立新用戶試試；
咱們來刪除一條用戶數據；
很簡單的功能，是否是挺有趣的呢；
- 1. 基於jsp的戶籍管理系統
- 2. 學籍管理系統
- 3. 戶籍年齡管理
- 4. 學生學籍管理系統源碼：Springboot+VUE
- 5. 基於JSP實現戶籍管理系統
- 6. 學生學籍管理系統
- 7. 【C語言】學籍管理系統
- 8. 學籍管理系統－java實現
- 9. Vue+springboot管理系統
- 10. vue權限管理系統
- 更多相關文章...
- • Swarm 集羣管理 - Docker教程
- • Maven 依賴管理 - Maven教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Docker 清理命令
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 基於jsp的戶籍管理系統
- 2. 學籍管理系統
- 3. 戶籍年齡管理
- 4. 學生學籍管理系統源碼：Springboot+VUE
- 5. 基於JSP實現戶籍管理系統
- 6. 學生學籍管理系統
- 7. 【C語言】學籍管理系統
- 8. 學籍管理系統－java實現
- 9. Vue+springboot管理系統
- 10. vue權限管理系統