vue实现户籍管理系统的实例解析

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

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

界面预览

步骤思路：

立即学习“前端免费学习笔记（深入）”；

1.html+css创建

2.引入vue，实例

3.准备默认数据message数组

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

睿拓智能网站系统-网上商城

睿拓智能网站系统-网上商城1.0免费版软件大小:5M运行环境：asp+access本版本是永州睿拓信息专为电子商务入门级用户开发的网上电子商城系统，拥有产品发布，新闻发布，在线下单等全部功能，并且正式商用用户可在线提供多个模板更换，可实现一般网店交易所有功能，是中小企业和个人开展个人独立电子商务商城最佳的选择，以下为详细功能介绍：1.最新产品-提供最新产品发布管理修改，和最新产品订单查看2.推荐产

下载

5.创建一条新数据newmessage

6.绑定到输入框v-model

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

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

9.点谁删谁del()函数

body部分：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<p id = 'app' v-cloak>
 <legend>户籍管理系统</legend></br>
 姓名：<input type="text" placeholder="请输入用户名" v-model = 'newmessage.name'></br>
 年龄：<input type="text" placeholder="请输入年龄" v-model = 'newmessage.age'></br>
 性别：
 <select v-model = 'newmessage.sex'>
 <option>男</option>
 <option>女</option>
 </select></br>
 手机：<input type="text" placeholder="请输入手机号" v-model = 'newmessage.phone'></br>
 <button class = 'save' @click = 'add()'>保存至用户</button></br>
 <table>
 <tr class = 'title'>
 <td width = '100px'>姓名</td>
 <td width = '100px'>性别</td>
 <td width = '100px'>年龄</td>
 <td width = '200px'>手机</td>
 <td width = '100px'>删除</td>
 </tr>
 <tr v-for = 'item,index in message'>
 <td>{{item.name}}</td>
 <td>{{item.sex}}</td>
 <td>{{item.age}}</td>
 <td>{{item.phone}}</td>
 <td><button @click = 'del(index)'>删除</button></td>
 </tr>
 </table>
</p>

vue部分：

<script>
 var app = new Vue({
 el:'#app',
 data:{
 message:[
  {
  name:'张三',
  sex:'女',
  age:16,
  phone:'1568888811'
  },
  {
  name:'李四',
  sex:'男',
  age:26,
  phone:'1456666622'
  },
  {
  name:'王麻子',
  sex:'女',
  age:36,
  phone:'1866666666'
  },
 ],
 newmessage:{name:'',age:'',sex:'男',phone:''},
 
 },
 methods:{
 add(){
  if(!this.newmessage.name == ''){
  this.message.push(this.newmessage);
  this.newmessage = {
  name:'',
  age:'',
  sex:'男',
  phone:''
  };
  }
  else{
  alert('请输入姓名！');
  }
 },
 del(index){
  this.message.splice(index,1);
 }
 }
 })
 </script>

css样式：

<style>
 *{
 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%;
 }
 </style>

相关学习推荐：javascript视频教程