vue.js checkbox

最新推荐文章于 2022-10-01 21:47:51 发布

原创最新推荐文章于 2022-10-01 21:47:51 发布 · 401 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #checkbox

本文介绍了一个使用Vue.js实现的学生信息管理界面，包括全选功能、学生信息显示和添加新学生的方法。通过监听复选框状态，实现全选和反选，同时展示如何动态更新学生列表。

<!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>