户籍管理系统Vue

时间  2020-05-04
标签 户籍 管理 系统 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

点击建立新用户试试；

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

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程