<!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>
7666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
