vue实现户籍管理系统


Posted in Javascript onMay 29, 2020

本文实例为大家分享了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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div 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>
</div>

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 相关文章推荐
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
详解js加减乘除精确计算
Mar 19 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 Javascript
JavaScript闭包原理与用法学习笔记
May 29 #Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 #jQuery
JS组件库AlloyTouch实现图片轮播过程解析
May 29 #Javascript
基于vue实现探探滑动组件功能
May 29 #Javascript
JS实现前端路由功能示例【原生路由】
May 29 #Javascript
JavaScript如何实现图片处理与合成
May 29 #Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 #jQuery
You might like
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
python轻松实现代码编码格式转换
2015/03/26 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
基于python使用tibco ems代码实例
2019/12/20 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
农村党员一句话承诺
2014/05/30 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
个性与发展自我评价
2015/03/06 职场文书
Python基础 括号()[]{}的详解
2021/11/07 Python
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python
Redis过期数据是否会被立马删除
2022/07/23 Redis