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 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
简单谈谈javascript高级特性
Sep 04 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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单例模式实现(对象只被创建一次)
2012/12/05 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
python对html代码进行escape编码的方法
2015/05/04 Python
Python分治法定义与应用实例详解
2017/07/28 Python
python实现用户管理系统
2018/01/10 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
django使用JWT保存用户登录信息
2020/04/22 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
课程设计心得体会
2013/12/28 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
《狼》教学反思
2014/03/02 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
《长征》教学反思
2014/04/27 职场文书
教师年度考核评语
2014/04/28 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang
优化Mysql查询的示例
2022/04/26 MySQL
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android
MySQL存储过程及语法详解
2022/08/05 MySQL