vue实现户籍管理系统

网络编程 2024/11/20 佚名

3 1 2

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

<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.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

风云阁资源网 Design By www.bgabc.com

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

暂无评论...

更新日志

2024年11月20日

vue实现户籍管理系统

微信小程序语音同步智能识别的实现案例代码解析

JavaScript闭包原理与用法学习笔记

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

更新日志

友情链接