VUE+Boostrap實現簡單的使用者新增和刪除
阿新 • • 發佈：2018-12-27
1.匯入所需的庫
css需要bootstrap.css
js需要jquery.js，bootstrap.js，vue.js
（直接使用下載好的就行，不需要使用npm等進行下載）
2.使用boostrap實現介面
實現效果如下
程式碼實現如下：
<body> <div id="userList" class="container"> <h3 class="text-center">新增使用者</h3> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="name" class="col-sm-2 control-label col-sm-offset-1 " >姓名：</label> <div class="col-sm-6"> <input id="name" type="text" class="form-control" v-model="user.name" placeholder="請輸入姓名"> </div> </div> <div class="form-group"> <label for="age" class="col-sm-2 control-label col-sm-offset-1 " >年齡：</label> <div class="col-sm-6"> <input id="age" type="text" class="form-control" v-model="user.age" placeholder="請輸入年齡"> </div> </div> <div class="form-group"> <label for="email" class="col-sm-2 control-label col-sm-offset-1 " >郵箱：</label> <div class="col-sm-6"> <input id="email" type="text" class="form-control" v-model="user.email" placeholder="請輸入郵箱"> </div> </div> <div class="form-group text-center"> <input type="button" class="btn btn-primary" value="添 加" v-on:click="addUser"> <input type="reset" class="btn btn-primary" value="重 置"> </div> </form> <hr> <table class="table table-bordered table-hover"> <caption class="h3 text-center text-info">目錄列表</caption> <thead> <tr> <th class="text-center">序號</th> <th class="text-center">姓名</th> <th class="text-center">年齡</th> <th class="text-center">郵箱</th> <th class="text-center">操作</th> </tr> </thead> <tbody> <tr v-for="(user,index) in users" class="text-center"> <td>{{index}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> <td>{{user.email}}</td> <td> <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=index">刪除</button> </td> </tr> <tr > <td colspan="5" class="text-right"> <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=-1">刪除所有</button> </td> </tr> </tbody> </table> <!--模態框，彈出框--> <div class="modal" id="del"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <!--close表示關閉標籤的樣式--> <button class="close" data-dismiss="modal">×</button> <h4 class="modal-title" v-show="nowIndex!==-1">確認要刪除使用者{{users[nowIndex]?users[nowIndex].name:''}}嗎？</h4> <h4 class="modal-title" v-show="nowIndex===-1">確認要刪除所有使用者嗎？</h4> </div> <div class="modal-body text-center"> <button class="btn btn-primary" data-dismiss="modal">取消</button> <button class="btn btn-primary" data-dismiss="modal" v-on:click="deleteUser">確認</button> </div> </div> </div> </div> </div> </body>
程式碼需要關注的地方：
- bootstrap中的柵欄佈局class="container"；
- 可以使用bootstrap中的class="text-center （text-right）"實現容器內的內容居中；
- 使用表單的時候：①首先使用<form>標籤將所有表單內容包含起來，新增bootstrap類role="form"和class="form-horizontal"實現水平居中，也可以參考bootstrap文件實現垂直等效果；②每一個表單組用div表示，新增類class="form-group",裡面可以放<label>或者<input>標籤，為了佈局方面，可以把input等元素放在一個div裡，可以使用boostrap柵欄佈局，柵欄佈局col相加不大於12，可以使用col-sm-off-set-num，進行偏移，實現居中效果，label和input標籤class="label-control"和class="form-control",input可以新增placeholder新增預設內容；③input type設定為button,可以新增bootstrap樣式class="btn btn-fault(primary,danger,warning) btn-sm value新增button裡的內容，需要強調將inpue設定為type="reset"可以將form標籤裡的所有內容清空。
- 水平分割線可以用<hr>
- 表格元素的使用：①結構table下有caption thead tbody，thead下面有tr ,tr裡面有th,tbody裡面tr，tr有td；②為table設定bootstrap屬性，可以有實線，虛線，滑鼠懸停效果；③caption是文字，可以為文字新增boostrap效果；④表格裡的資料由VUE例項裡的資料加載出來；
- ①bootstrap裡的模態框，有三層modal__modal-dialog__modal-content，modal-content裡面有三層，modal-header modal-body,modal-footer;②header設定關閉按鈕參考×和提示內容class="modal-title";③開啟模態框，在需要點選的按鈕上設定data-toggle="modal"和data-target="#del";關閉模態框，在模態框中的按鈕設定data-dismiss=“modal”,需要強調的是，可以為按鈕同時設定data-dismiss和click事件；
3.新增VUE例項
<script>
window.onload=function () {
let vm=new Vue({
el:'#userList',
data:{
users:[
{name:'wkh',age:22,email:'[email protected]'},
{name:'yjp',age:23,email:'[email protected]'}
],
/*不寫頁面會顯示不出倆，會報錯，user is not defined*/
user:{},
/*當前要刪除項的索引*/
nowIndex:-1
},
methods:{
addUser(){
this.users.push(this.user);
this.user={};
},
deleteUser(){
if(this.nowIndex==-1){//刪除所有
this.users=[];
}else{
/*從指定位置開始刪除元素*/
this.users.splice(this.nowIndex,1);
}
}
}
})
}
</script>程式碼需要關注的地方
- windoe.onload=function(){}頁面載入完執行；
- new一個vue例項，有el,data,methods等內容；
- 新增使用者時，使用者的姓名，年齡，郵件和VUE中的資料相關聯，也就是相互繫結需要v-modal，繫結的是usr.name,所以需要在data裡設定這樣user物件；新增使用者按鈕設定v-onclick:"xxx"事件，簡寫@:click="xxx";新增使用者動作使用push,新增完成後清空user物件。
- 表格資料在tr就是行上使用v-for指令，然後在td裡使用{{}}語法展示資料；
- 區分刪除那一行還是刪除所有。可以使用陣列的index屬性來區分，index最小是0，可以用變數currentIndex區分，如果是刪除所有，就設定為-1.刪除當前使用者，則設定為當前index值，這樣在彈出模態框的同時，currentIndex的值就發生了變化。 然後可以在模態框中點選確認進行動作的執行，動作執行寫一個函式，先判斷currentIndex的值，如果是-1，刪除所有，如果不是，就刪除當前值。刪除所有直接賦值空陣列，刪除固定下標的值，使用splice。
- 注意this的使用。