户籍管理系统Vue

最新推荐文章于 2021-01-01 04:20:01 发布

chepao3863

最新推荐文章于 2021-01-01 04:20:01 发布

阅读量711

点赞数

文章标签： javascript 开发工具 ViewUI

原文链接：https://my.oschina.net/u/3995971/blog/2245862

版权

<!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;
}

.register{
width:84px;
height:28px;
border:none;
background-color:"black";
border-radius:7px;
color:white;
}

.delone{
width:45px;
height:28px;
border:none;
background-color:"black";
border-radius:7px;
color:white;
}

.table1{
border:1px solid black;
border-collapse:collapse;
width:500px;
height:190px;
margin: 0 auto;

}
th{
border:1px solid black;
font-size:12px;
background-color:gray;
height:25px;

}
.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>

<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>

</body>
</html>

简单的效果展示：

我们来增加一条新的用户数据；

点击创建新用户试试；

我们来删除一条用户数据；

很简单的功能，是不是挺有趣的呢；

转载于:https://my.oschina.net/u/3995971/blog/2245862

chepao3863

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
户籍管理系统Vue

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...
复制链接

扫一扫