<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>練習：用戶管理</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>添加用戶</h2>
<form action="" class="form-horizontal">
<div class="form-group">
<label for="name" class="control-label col-sm-2 col-sm-offset-2">姓名：</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="name" v-model="user.name" placeholder="輸入姓名">
</div>
</div>
<div class="form-group">
<label for="age" class="control-label col-sm-2 col-sm-offset-2">姓名：</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="age" v-model="user.age" placeholder="輸入年齡">
</div>
</div>
<div class="form-group">
<label for="email" class="control-label col-sm-2 col-sm-offset-2">姓名：</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="email" v-model="user.email" placeholder="輸入郵箱">
</div>
</div>
<div class="form-group text-center">
<input type="button" value="添加" @click="addUser" class="btn btn-primary"/>
<input type="reset" value="重置" class="btn btn-primary"/>
</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>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in users">
<td class="text-center">
<input type="checkbox" :value="index" v-model="selectArr">
</td>
<td class="text-center">{{index+1}}</td>
<td class="text-center">{{user.name}}</td>
<td class="text-center">{{user.age}}</td>
<td class="text-center">{{user.email}}</td>
<td class="text-center">
<button class="btn btn-danger" @click="deleteOne(index)">刪除</button>
</td>
</tr>
<tr>
<td colspan="6" class="text-right">
{{selectArr}}
<input type="checkbox" class='checkbox' @click="selectAll">
<button @click="deleteSel" type="button" class="btn btn-danger">批量刪除</button>
<button @click="deleteAll" type="button" class="btn btn-danger">刪除所有</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el:".container",
data:{
users:[
{name:'Lee',age:26,email:'[email protected]'},
{name:'Jay',age:40,email:'[email protected]'}
],
user:{},
selectArr:[]
},
methods:{
addUser:function(){//添加用戶
if(this.user) {
this.users.push(this.user);
this.user = {};
}
},
deleteAll(){//全部刪除
this.users = []
},
deleteOne(index){//刪除指定欄目
this.users.splice(index,1)
},
deleteSel(){//選擇刪除
let arr = [];
var len = this.users.length;
for(let i = 0;i<len;i++) {
if (this.selectArr.indexOf(i) >=0 ) {
console.log(this.selectArr.indexOf(i));
}else{
arr.push(this.users[i]);
}
}
this.users = arr;
this.selectArr = [];
},
selectAll(event){//全選
// console.log(event);
var _this = this;
// console.log(event.currentTarget);
if(!event.currentTarget.checked) {
this.selectArr = [];
}else{
this.selectArr = [];
/* 這裏的this指向問題需要注意一下每一個用function聲明的函數在調用時都會在函數內創建自己的this。
** this一般是函數所操作的對象。如果沒有操作的對象。this在"use strict";嚴格模式下是 undefined，非嚴格模式下是 window。
** 也就是說，function聲明的函數總是有自己的this。從而遮蓋外層作用域中的this。
** 如果用es6的箭頭函數()=>{}就沒有自己的this。在箭頭函數()=>{}中訪問this，是訪問外層作用域中的this
*/
// this.users.forEach(function(item,i) {
// _this.selectArr.push(i)
// })
this.users.forEach((item,i)=>{
this.selectArr.push(i)
})
}
}
}
});
</script>
</body>
</html>
![]()
