1)代码
<!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">
<!-- 集合长度大于0,循环集合,自定义方法过滤 -->
<ul v-if="students.length>0">
<li v-for="(item,index) in myFilter(students)" v-bind:id="item.id" v-bind:key="item.id">
{{index}}-{{item.id}}-{{item.name}}
</li>
</ul>
<ul>
<!-- 循环组件 -->
<my-student v-for="(item,index) in students" v-bind:student="item" v-bind:index="index">
</my-student>
</ul>
<ul>
<!-- 循环整数,用v-if过滤 -->
<li v-for="n in 10" v-if="n%2==0">{{n}}</li>
</ul>
<ul>
<!-- 循环对象属性 -->
<li v-for="(item,name,index) in student">{{index}}-{{name}}-{{item}}</li>
</ul>
<div>
<button v-on:click="mySplice();">splice</button>
</div>
</div>
</body>
<script type="text/javascript">
Vue.component('my-student', {
template: '<li>{{index}}-{{student.id}}-{{student.name}}</li>',
props: ['student', 'index']
});
var vm = new Vue({
el: '#vm',
data: {
students: [{
id: 1,
name: '张三'
},
{
id: 2,
name: '李四'
},
{
id: 3,
name: '王五'
},
{
id: 4,
name: '马六'
},
{
id: 5,
name: '赵七'
},
{
id: 6,
name: '曹八'
}
],
student: {
name: '小明',
address: '江苏苏州',
gender: '男',
}
},
methods: {
myFilter: function(students) { /* 自定义方法过滤 */
return students.filter(function(item) {
return item.id % 2 == 0;
});
},
mySplice: function() { /* 更新对象集合 */
var newModel = {
id: '2',
name: '李明'
};
var index = getIndex(newModel, vm.students);
if (index != -1) {
vm.students.splice(index, 1, newModel);
}
}
}
});
/* 获取学生在集合中的索引 */
function getIndex(student, students) {
var index = -1;
$.each(students, function(i, item) {
if (student.id == item.id) {
index = i;
return false;
}
});
return index;
}
</script>
</html>
2)结果