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 相关文章推荐
DWZ table的原生分页浅谈
Mar 01 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 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 检查扩展库或函数是否可用的代码
2010/04/06 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
vue实现放大镜效果
2020/09/17 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
用Python编程实现语音控制电脑
2014/04/01 Python
初步理解Python进程的信号通讯
2015/04/09 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
python 实现两个线程交替执行
2020/05/02 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
个人工作总结范文2014
2014/11/07 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
食品安全责任书范本
2015/05/09 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
七个非常实用的Python工具包总结
2021/06/15 Python
Python&Matlab实现樱花的绘制
2022/04/07 Python