利用vue制作一个简单的信息登记表 ---添加删除和修改
生活随笔
收集整理的这篇文章主要介绍了
利用vue制作一个简单的信息登记表 ---添加删除和修改
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
添加信息和按照索引值删除信息
（1）登记表的样式：
（2）大致思路
把输入框里的姓名，年龄，性别双向绑定data里对应的变量，变量赋初值皆为空（性别赋初值为男）。是否同意协议，默认不同意；给提交按钮绑定事件。
给删除按钮增加点击事件：
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.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 遍历查找指定元素的数组下标。之后，在进行删除。
删除函数：
全部代码：
<!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制作一个简单的信息登记表 ---添加删除和修改的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： Progress On 在线原型设计初体
- 下一篇： 自定义验证和数据处理的Utils工具类，