vue.js radio

最新推荐文章于 2024-10-10 00:22:48 发布

原创最新推荐文章于 2024-10-10 00:22:48 发布 · 317 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #radio

本文介绍了一个使用Vue.js框架实现的学生信息展示和排序的示例。通过绑定和计算属性，实现了学生列表的动态渲染及根据ID正序排列。代码中包含了HTML结构、JavaScript逻辑以及数组对象方法的排序实现。

<!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 v-for="(item,index) in sortStudents">
			<input type="radio" v-bind:id="item.id" v-bind:value="item.id" v-model="checkedStudent">
			<label v-bind:for="item.id">{{item.name}}</label>
		</li>
		</ul>
		<span>{{checkedStudent}}</span>
	</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: '马六',
					},
				],
				/* 选中学生 */
				checkedStudent: 's20'
			},
			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>