vue实现户籍管理系统

本文实例为大家分享了vue实现户籍管理系统的具体代码，供大家参考，具体内容如下

户籍管理系统，v-model，v-for的引用

界面预览

步骤思路：

1.html+css创建

2.引入vue，实例

3.准备默认数据message数组

4.渲染默认数据，v-for循环表单

5.创建一条新数据newmessage

6.绑定到输入框v-model

7.创建一个添加函数add()，把新数据添加到默认数据中，newmessage->message

8.添加完后，清空表单，即恢复newmessage

9.点谁删谁del()函数

body部分：

 
户籍管理系统


 姓名：

 年龄：

 性别：
 
 男
 女
 

 手机：

 保存至用户

 

 

 
姓名
 
性别
 
年龄
 
手机
 
删除
 
 

 
{{item.name}}
 
{{item.sex}}
 
{{item.age}}
 
{{item.phone}}
 
删除
 
 

vue部分：

css样式：

 *{
 margin:0;
 padding:0;
 }
 #app{
 border: 1px solid black;
 width:800px;
 padding:30px 30px;
 }
 #app .save{
 background-color: #555555;
 border-radius: 10%;
 height:50px;
 color:white;
 }
 #app input,select{
 margin:10px 0;
 width:300px;
 }
 #app td{
 text-align: center;
 }
 #app .title td{
 background-color: #555555;
 color:white;
 }
 #app table button{
 background-color: #555555;
 color:white;
 border-radius: 30%;
 }
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。