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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
javascript简易画板开发
Apr 12 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
vue点击按钮实现简单页面的切换
Sep 08 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.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
php简单压缩css样式示例
2016/09/22 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python模拟登录12306的方法
2014/12/30 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
巴西购物网站:Submarino
2020/01/19 全球购物
Order by的几种用法
2013/06/16 面试题
Linux常见面试题
2016/10/04 面试题
关于人生的感言
2014/01/17 职场文书
运动会解说词100字
2014/01/31 职场文书
企业军训感言
2014/02/08 职场文书
大班开学家长寄语
2014/04/04 职场文书
关于青春的演讲稿
2014/05/05 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
离婚纠纷代理词
2015/05/23 职场文书
校园安全学习心得体会
2016/01/18 职场文书
Fluentd搭建日志收集服务
2022/09/23 Servers