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