vue.js select

最新推荐文章于 2024-12-19 10:45:57 发布

原创最新推荐文章于 2024-12-19 10:45:57 发布 · 373 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #select

本文介绍了一个使用Vue.js实现的学生信息下拉选择器案例，该选择器能够根据学生的ID对学生信息进行排序，并实时显示选中的学生ID。通过此案例，读者可以了解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">
		<select v-model="selectedStudent">
		<option v-for="(item,index) in sortStudents" v-bind:value="item.id">{{item.name}}</option>
		</select>
		<span>{{selectedStudent}}</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: '马六',
					},
				],
				/* 选中学生 */
				selectedStudent: '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>