利用vue制作一个简单的信息登记表 ---添加删除和修改
生活随笔
收集整理的這篇文章主要介紹了
利用vue制作一个简单的信息登记表 ---添加删除和修改
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
添加信息和按照索引值刪除信息
（1）登記表的樣式：
（2）大致思路
把輸入框里的姓名，年齡，性別雙向綁定data里對應的變量，變量賦初值皆為空（性別賦初值為男）。是否同意協(xié)議，默認不同意；給提交按鈕綁定事件。
給刪除按鈕增加點擊事件：
delUser(d){// splice根據(jù)指定的下標刪除指定的數(shù)組元素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"> 是否同意協(xié)議</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:[],// 設(shè)置初始值，用于雙向綁定name:'',age:'',sex:'男',isagree:false,},methods:{// 如果“是否同意協(xié)議”沒有同意的話，點擊提交時，彈出警告框"請先同意協(xié)議"// 然后把info賦值為vue里的相對應的值（name,age,sex已經(jīng)實現(xiàn)了雙向綁定，// 即輸入框里的值都賦值給了info）。之后，再把info添加到數(shù)組中去// 點擊提交后，tr去遍歷數(shù)組user里的每一項，并且在表格里顯示出來submit(){if(this.isagree===false){alert("請先同意協(xié)議");return ;}// 對象類型，插入數(shù)組users中去。var info={name:this.name,age:this.age,sex:this.sex}// push---把指定的元素添加到數(shù)組末尾this.users.push(info)},delUser(d){// splice根據(jù)指定的下標刪除指定的數(shù)組元素this.users.splice(d,1);}}})</script></body> </html>修改按鈕，按照某個信息進行刪除
（1）頁面效果：（比第一種情況多一個修改的按鈕）
（2）大致的思路：
（a） 修改
在data里聲明變量id，id指要修改的信息的下標。
給修改增加點擊事件edit(i),在修改函數(shù)里，把id賦值為下標i，還要把修改的信息顯示在輸入框里，
修改完點擊提交的時候，在提交函數(shù)內(nèi)部判斷是修改的提交還是添加的提交
// 利用this.id不為空的時候是修改， 為空的時候，是添加。// this.id是點擊修改的信息的下標。 之后還要把this.id='',即恢復成默認值// 或者利用this.isedit為true時，是修改。之后，把this.isedit修改為默認值false // 涉及隱式轉(zhuǎn)換的問題會把''隱式轉(zhuǎn)換為0 ，點擊第一條時，this.id為0，''隱式轉(zhuǎn)換， // ''與0相等，此時會變成添加。因此，用全等不用相等if(this.id!==''){console.log("修改")// 執(zhí)行數(shù)據(jù)修改 // 數(shù)組下標 重新賦值 涉及深拷貝問題// 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("添加") ;// 把指定的元素追加到數(shù)組的末尾this.users.push(info)}// 點擊提交之后，恢復默認值this.id = '';（b）不按下標值刪除，按照姓名刪除
<button @click="delUser(item.name)" class="btn btn-danger">刪除</button>在刪除函數(shù)中利用 findIndex 遍歷查找指定元素的數(shù)組下標。之后，在進行刪除。
刪除函數(shù)：
全部代碼：
<!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">是否同意協(xié)議</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('請先同意協(xié)議');return;}var info = {name:this.name,age:this.age,sex:this.sex}// 利用this.id不為空的時候是修改， 為空的時候，是添加。// this.id是點擊修改的信息的下標。 之后還要把this.id='',即恢復成默認值// 或者利用this.isedit為true時，是修改。之后，把this.isedit修改為默認值false // 涉及隱式轉(zhuǎn)換的問題會把''隱式轉(zhuǎn)換為0 ，點擊第一條時，this.id為0，''隱式轉(zhuǎn)換， // ''與0相等，此時會變成添加。因此，用全等不用相等if(this.id!==''){console.log("修改")// 執(zhí)行數(shù)據(jù)修改 // 數(shù)組下標 重新賦值 涉及深拷貝問題// 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("添加") ;// 把指定的元素追加到數(shù)組的末尾this.users.push(info)}// 點擊提交之后，恢復默認值this.id = '';},delUser(d){// 此時的d是名字 不是下標// 此時的splice中，文字隱式轉(zhuǎn)換為0，所以最終都是刪除的第一條。因此不可以直接用splice(d,1)console.log(d)// find是循環(huán)查找 d為名字的時候 用此法 // findIndex 遍歷查找指定元素的數(shù)組下標。var idx = this.users.findIndex(item=>{return item.name == d;// // 相當于// if(item.name == d){// return item;// }})this.users.splice(idx,1)// splice根據(jù)數(shù)組下標刪除指定的數(shù)組元素// 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;// 此時直接點擊提交后，調(diào)用的push方法，就不是修改，而是又增加一條信息this.isedit = true;}}})</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的利用vue制作一个简单的信息登记表 ---添加删除和修改的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Progress On 在线原型设计初体
- 下一篇： 自定义验证和数据处理的Utils工具类，