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="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>

Vue实现户籍管理系统户籍信息的添加与删除相关推荐

利用vue制作一个简单的信息登记表 ---添加删除和修改
添加信息和按照索引值删除信息 (1)登记表的样式: (2)大致思路把输入框里的姓名,年龄,性别双向绑定data里对应的变量,变量赋初值皆为空(性别赋初值为男).是否同意协议,默认不同意:给提交按钮绑 ...
vue input文本框中文字整体添加整体删除_揭秘神奇的PPT文本框，高手都喜欢这样的招数...
大家好,我是A君,分享越多,快乐越多. 是否对PPT中的文本框操作还是简单的输入文字呢?赶紧看看PPT高手是如何利用文本框轻松制作出高级PPT的. 01 使用文本框转换成SmartArt 有时候,我们 ...
户籍管理系统的设计与实现（论文+PPT+源码）
摘要当今社会人们生活质量越来越高,人们对生活品质的追求不断提升,对于孩子求学,变更住所等情况时有发生,因此对于户籍变动管理就显得十分重要,管理用户的户籍信息可以有效防止信息错乱,信息管理过程中出现 ...
vue检测对象值_Vue 不能检测到对象属性的添加或删除，注意！！！
Vue 不能检测到对象属性的添加或删除 1.划重点了:Vue 不能检测到对象属性的添加或删除官网--深入响应式原理(https://cn.vuejs.org/v2/guide...)中介绍到:受现代 ...
MFC超市商品管理系统学生成绩管理系统学生信息管理系统通讯录管理系统图书管理系统
MFC超市商品管理系统学生成绩管理系统学生信息管理系统通讯录管理系统图书管理系统序号题目数组保存数据文件保存数据数据库保存数据 1 超市商品管理系统 2 学生成绩管理系统 3 学生信息管理系 ...
python+django+vue个人简历管理系统
本项目设计分为用户,管理员两个角色,用户的主要功能是注册登陆系统,查看简历模板,查看招聘,提交简历应聘,上传自己的简历,求职论坛发贴等:管理员可以对用户信息,简历模板,模板类型,招聘会,简历上传管理, ...
Java毕设项目户籍管理系统（java+VUE+Mybatis+Maven+Mysql）
Java毕设项目户籍管理系统(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webst ...
[附源码]计算机毕业设计JAVA户籍管理系统
[附源码]计算机毕业设计JAVA户籍管理系统项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(Intell ...
[附源码]SSM计算机毕业设计户籍管理系统JAVA
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
BS-XX-007基于JSP实现户籍管理系统
本系统基于jsp,servlet来开发实现的,数据库采用mysql数据库,开发工具采用idea或eclipse.主要功能包含户籍管理,迁入管理,迁出管理,反馈投诉,管理员管理等.送参考论文,任务书和答 ...

Vue实现户籍管理系统户籍信息的添加与删除

户籍管理系统，v-model，v-for的引用

界面预览

步骤思路：

body部分：

vue部分：

css样式：

Vue实现户籍管理系统户籍信息的添加与删除相关推荐

最新文章

热门文章