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