Class3 - v-for介绍
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:Vue2.x从入门到实战。Vue.js Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动.(来自官方介绍)
v-for
常用于列表渲染,我们可以用 v-for
指令基于一个数组来渲染一个列表。v-for
指令需要使用 item in items
形式的特殊语法,其中 items
是源数据数组,而 item
则是被迭代的数组元素的别名。
- 数组使用方式
1 | <ul> |
- 数组对象使用方式,一般推荐绑定
key
:v-bind:key="item.id"
1
2
3<ul>
<li v-for="(item,index) in sortstudents" v-bind:key="item.studentsid">{{item.name}}--{{item.grade}}--{{index}}</li>
</ul>
建议尽可能在使用 v-for
时提供 key attribute
,除非遍历输出的 DOM
内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。因为它是 Vue 识别节点的一个通用机制,key
并不仅与 v-for
特别关联。
不要使用对象或数组之类的非基本类型值作为
v-for
的key
。请用字符串或数值类型的值。
- 对象数组排序方法
1 | function sortByKey(array,key){ |
#源代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue v-for</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h3>v-for</h3>
<div id="app">
<ul>
<li v-for="item in sortItem">{{item}}</li>
</ul>
<ul>
<li v-for="(item,index) in sortstudents" v-bind:key="item.studentsid">{{item.name}}--{{item.grade}}--{{index}}</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
isLogin:false,
message:"Welcome",
items:[10,23,18,4,34,354],
students:[{
studentsid:1,
name:"张三",
grade:98
},{
studentsid:2,
name:"李四",
grade:65
},{
studentsid:3,
name:"王五",
grade:95
}]
},
computed:{
sortItem:function(){
return this.items.sort(sortNumber);
},
sortstudents:function(){
return sortByKey(this.students,'grade');
}
}
});
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));
});
}
function sortNumber(a,b){
return a-b;
}
</script>
</body>
</html>