铁雪资源网 Design By www.gsvan.com

本文实例为大家分享了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>

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

标签:
vue户籍管理系统,vue户籍管理,vue管理系统

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“vue实现户籍管理系统”

暂无vue实现户籍管理系统的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?