<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="vm">
<ul v-if="students.length>0">
<li>
<input type="checkbox" id="all" value="all" v-model="isCheckedAll" v-on:click="checkAll();">
<label for="all">全選</label>
</li>
<li v-for="(item,index) in sortStudents">
<input type="checkbox" v-bind:id="item.id" v-bind:value="item.id" v-model="checkedStudents">
<label v-bind:for="item.id">{{item.id}}-{{item.name}}</label>
</li>
</ul>
<span>{{checkedStudents}}</span>
<button v-on:click.once="add();">添加</button>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#vm',
data: {
/* 所有學生 */
students: [{
id: 's20',
name: '李四',
},
{
id: 's10',
name: '張三',
},
{
id: 's30',
name: '王五',
},
{
id: 's40',
name: '馬六',
},
],
/* 選中學生 */
checkedStudents: ['s10', 's20'],
/* 全選是否選中 */
isCheckedAll: false,
},
methods: {
checkAll: function() { /* 單擊複選框時,全選狀態沒有改變 */
if (vm.isCheckedAll) { /* 全選選中,清空所有選項 */
vm.checkedStudents = [];
} else { /* 全選沒有選中,選中所有選項 */
vm.checkedStudents = [];
$.each(vm.students, function(i, student) {
vm.checkedStudents.push(student.id);
})
}
},
add: function() { /* 添加學生 */
var item = {
id: 's21',
name: '小明'
};
vm.students.push(item);
}
},
watch: {
checkedStudents(val) { /* 監聽選中學生 */
if (vm.students.length == val.length) { /* 如果學生個數=選中學生個數 */
vm.isCheckedAll = true;
} else {
vm.isCheckedAll = false;
}
}
},
computed: {
sortStudents: function() { /* 根據主鍵正序 */
return sortByKey(this.students, 'id');
}
}
});
//數組對象方法排序:
function sortByKey(array, key) {
return array.sort(function(a, b) {
var x = a[key];
var y = b[key];
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
});
}
</script>
</html>
