利用vue制作一个简单的信息登记表 ---添加删除和修改

添加信息和按照索引值删除信息

（1）登记表的样式：

（2）大致思路
把输入框里的姓名，年龄，性别双向绑定data里对应的变量，变量赋初值皆为空（性别赋初值为男）。是否同意协议，默认不同意；给提交按钮绑定事件。

 submit(){if(this.isagree===false){alert("请先同意协议");return ;}//    对象类型，插入数组users中去。var info={name:this.name,age:this.age,sex:this.sex}//    push---把指定的元素添加到数组末尾this.users.push(info)},delUser(d){// splice根据指定的下标删除指定的数组元素this.users.splice(d,1);}

给删除按钮增加点击事件：

  delUser(d){// splice根据指定的下标删除指定的数组元素this.users.splice(d,1);}

（3）总体代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 引入vue --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 引入bootstrap，使页面更友好 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"></head>
<body>
<div id="app"><div class="col-md-4"> <div class="form-group"><!-- 点击文字，对应的输入框获得焦点  label里for和input里id的作用--><!-- 双向绑定 --><label for="name">姓名</label><input  id="name" class="form-control" type="text" v-model="name"></div><div><label for="age">年龄</label><input  id="age"  class="form-control" type="text" v-model="age"></div><div><label for="">性别</label><input type="radio" value="男" v-model="sex">男<input type="radio" value="女" v-model="sex">女</div><div><input type="checkbox" v-model="isagree">  是否同意协议</div><button  class="btn btn-primary" @click="submit()">提交</button></div><br><div class="col-md-9">  <table class="table table-bordered table-striped "><thead><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th></thead><tbody><tr v-for="(item,index) of users"><td> {{index+1}}</td><td> {{item.name}}</td><td> {{item.age}}</td><td> {{item.sex}}</td><td> <button class="btn btn-danger" @click="delUser(index)"> 删除 </button> </td></tr></tbody></table></div></div><script>new Vue({el:"#app",data:{users:[],// 设置初始值，用于双向绑定name:'',age:'',sex:'男',isagree:false,},methods:{// 如果“是否同意协议”没有同意的话，点击提交时，弹出警告框"请先同意协议"// 然后把info赋值为vue里的相对应的值（name,age,sex已经实现了双向绑定，// 即输入框里的值都赋值给了info）。之后，再把info添加到数组中去// 点击提交后，tr去遍历数组user里的每一项，并且在表格里显示出来submit(){if(this.isagree===false){alert("请先同意协议");return ;}//    对象类型，插入数组users中去。var info={name:this.name,age:this.age,sex:this.sex}//    push---把指定的元素添加到数组末尾this.users.push(info)},delUser(d){// splice根据指定的下标删除指定的数组元素this.users.splice(d,1);}}})</script></body>
</html>

修改按钮，按照某个信息进行删除

（1）页面效果：（比第一种情况多一个修改的按钮）

（2）大致的思路：
（a）修改
在data里声明变量id，id指要修改的信息的下标。
给修改增加点击事件edit(i),在修改函数里，把id赋值为下标i，还要把修改的信息显示在输入框里，

 this.name = this.users[i].name;this.age = this.users[i].age;this.sex = this.users[i].sex;

修改完点击提交的时候，在提交函数内部判断是修改的提交还是添加的提交

  // 利用this.id不为空的时候是修改， 为空的时候，是添加。// this.id是点击修改的信息的下标。   之后还要把this.id='',即恢复成默认值// 或者利用this.isedit为true时，是修改。之后，把this.isedit修改为默认值false
// 涉及隐式转换的问题会把''隐式转换为0 ，点击第一条时，this.id为0，''隐式转换，
// ''与0相等，此时会变成添加。因此，用全等不用相等if(this.id!==''){console.log("修改")// 执行数据修改  // 数组下标 重新赋值  涉及深拷贝问题// this.users[this.id] = info;this.users[this.id].name = info.name;this.users[this.id].age = info.age;this.users[this.id].sex = info.sex;console.log(this.users)}else{console.log("添加") ;// 把指定的元素追加到数组的末尾this.users.push(info)}// 点击提交之后，恢复默认值this.id = '';

（b）不按下标值删除，按照姓名删除

  <button @click="delUser(item.name)" class="btn btn-danger">删除</button>

在删除函数中利用 findIndex 遍历查找指定元素的数组下标。之后，在进行删除。
删除函数：

  delUser(d){// 此时的d是名字 不是下标// 此时的splice中，文字隐式转换为0，所以最终都是删除的第一条。因此不可以直接用splice(d,1)console.log(d)// find是循环查找 d为名字的时候 用此法 // findIndex 遍历查找指定元素的数组下标。var idx = this.users.findIndex(item=>{return item.name == d;// // 相当于// if(item.name == d){//     return item;// }})this.users.splice(idx,1)// splice根据数组下标删除指定的数组元素// this.users.splice(d,1)},

全部代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>信息登记表</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body><div id="content"><div class="col-md-3"><div class="form-group"><label for="name">姓名</label><input id="name" class="form-control" type="text" v-model="name"></div><div><label for="age">年龄</label><input id="age" class="form-control"  type="text" v-model="age"></div><div class="form-group"><label for="">性别</label><input type="radio" value="男" v-model="sex">男<input type="radio" value="女" v-model="sex">女</div><div class="form-group"><input type="checkbox" v-model="isagree" @click="isdisabled=!isdisabled">是否同意协议</div><!-- 禁用 只有点击了同意之后，才可以提交 --><button class="btn btn-primary" @click="submit" :disabled="isdisabled">提交</button></div><table class="table table-bordered table-striped"><thead><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th></thead><tbody><tr v-for="(item,index) of users"><td>{{ index + 1 }}</td><td> {{ item.name }} </td><td>{{ item.age }}</td><td>{{ item.sex }}</td><td><button  class="btn btn-info"  @click="edit(index)">修改</button><!-- <button @click="delUser(index)" class="btn btn-danger">删除</button> --><!-- 传递的不是下标时，怎么删除 --><button @click="delUser(item.name)" class="btn btn-danger">删除</button></td></tr></tbody></table></div><script>new Vue({el:'#content',data:{users:[{name:"lili",age:18,sex:"女"},{name:"wangwang ",age:20,sex:"男"}],name:'',age:'',sex:'男',isagree:false,isdisabled:true,id:'',isedit:false,},methods:{submit(){console.log(this.id);if(this.isagree===false){alert('请先同意协议');return;}var info = {name:this.name,age:this.age,sex:this.sex}// 利用this.id不为空的时候是修改， 为空的时候，是添加。// this.id是点击修改的信息的下标。   之后还要把this.id='',即恢复成默认值// 或者利用this.isedit为true时，是修改。之后，把this.isedit修改为默认值false
// 涉及隐式转换的问题会把''隐式转换为0 ，点击第一条时，this.id为0，''隐式转换，
// ''与0相等，此时会变成添加。因此，用全等不用相等if(this.id!==''){console.log("修改")// 执行数据修改  // 数组下标 重新赋值  涉及深拷贝问题// this.users[this.id] = info;this.users[this.id].name = info.name;this.users[this.id].age = info.age;this.users[this.id].sex = info.sex;console.log(this.users)}else{console.log("添加") ;// 把指定的元素追加到数组的末尾this.users.push(info)}// 点击提交之后，恢复默认值this.id = '';},delUser(d){// 此时的d是名字 不是下标// 此时的splice中，文字隐式转换为0，所以最终都是删除的第一条。因此不可以直接用splice(d,1)console.log(d)// find是循环查找 d为名字的时候 用此法 // findIndex 遍历查找指定元素的数组下标。var idx = this.users.findIndex(item=>{return item.name == d;// // 相当于// if(item.name == d){//     return item;// }})this.users.splice(idx,1)// splice根据数组下标删除指定的数组元素// this.users.splice(d,1)},edit(i){// console.log(i);// console.log(this.users[i]);// 每次点击，给id赋新的值this.id = i;// 表格里显示出要修改的那一条信息this.name = this.users[i].name;this.age = this.users[i].age;this.sex = this.users[i].sex;this.isagree = true;this.isdisabled = false;// 此时直接点击提交后，调用的push方法，就不是修改，而是又增加一条信息this.isedit = true;}}})</script>
</body>
</html>

利用vue制作一个简单的信息登记表 ---添加删除和修改相关推荐

用计算机怎么做成绩表,利用Excel制作一个简单的学生成绩表.doc
利用Excel制作一个简单的学生成绩表教学设计表学科信息技术授课年级八年级学校教师姓名章节名称初中信息技术八年级上册第7课(第1节)计划学时1学时学习内容分析学习Excel的基础知识, ...
利用EasyDL制作一个简单的图片识别小项目
主要是利用EasyDL制作一个简单的傻瓜式猫狗图片识别,利用EasyDL,只需要几步简单的点击即可 *主要的步骤: 1.准备数据 2.训练模型 3.部署 4.H5 * 1.首先创建两个文件夹cat和d ...
pr如何跳到关键帧_PR教程如何利用pr制作一个简单的动画
Adobe Premiere Pro简称PR,是一款非常不错的视频制作编辑软件,如何如何利用pr制作一个简单的动画,这里小编为大家带来了pr动画制作教程--利用pr制作动画,一起来学习一下吧! Ado ...
利用DW制作一个简单的文字logo
这是利用DW设计一个简单的文字logo方案 1 建立一个HTML5 2用strong标签写出文字Google 3在style标签下利用font size定义字号 4根据CSS设定指定参数效果如下:
利用table制作一个简单的个人简历
table的曾经在div没有出现之前,table曾是做网页的中坚力量.记得在开始学网页的时候,div是神马,我不造呀!做网页还用div吗,就只用table就可以了,各种表格嵌套加嵌套,一个网页就拼凑 ...
利用js制作一个简单的QQ农场小游戏
html文件代码 <!DOCTYPE html> <html><head><meta charset="utf-8" />< ...
vue制作一个简单的导航栏
1:HTML <ul><li v-for="(item,index) of itemList" :class="current===index ? 'a ...
java完成一个学生信息调查程序_利用Java设计一个简单的学生信息管理程序
利用Java设计一个简单的控制台学生信息管理程序此程序可作为课设的参考,其中信息存储于文件中. 创建了学生类Student,用于存储学号等的信息.创建StudentFunction类,用于实现诸如学 ...
如何利用laragon框架制作一个简单的应用？
如何利用laragon框架制作一个简单的应用? 一.搭建环境 1. 安装Laragon 1.1 打开安装包用的语言选择自己习惯用的语言 1.2 选择安装地址 1.3 选择Next,开始install ...

利用vue制作一个简单的信息登记表 ---添加删除和修改

添加信息和按照索引值删除信息

修改按钮，按照某个信息进行删除

全部代码：

利用vue制作一个简单的信息登记表 ---添加删除和修改相关推荐

最新文章

热门文章