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

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

界面预览

vue实现户籍管理系统

步骤思路:

1.html+css创建

2.引入vue,实例

3.准备默认数据message数组

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

5.创建一条新数据newmessage

6.绑定到输入框v-model

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

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

9.点谁删谁del()函数

body部分:

<script src="/UploadFiles/2021-04-02/vue.js">

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>

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

风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com