v-for 迭代数组
我们用
v-for
指令根据一组数组的选项列表进行渲染。
v-for
指令需要使用
item in items
形式的特殊语法，
items
是源数据数组并且
item
是数组元素迭代的别名。
案例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - v-for 迭代数组</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="site in sites">
{{ site.name }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: '足球' },
{ name: '篮球' },
]
}
})
</script>
</body>
</html>
----- ul 无序列表； ol 有序列表。
在
v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
案例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - v-for 迭代数组</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(site,index) in sites">
{{ site.name }} -{{index}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: '足球' },
{ name: '篮球' },
]
}
})
</script>
</body>
</html>
v-for 迭代对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - v-for 迭代对象</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: '程序员',
age:24,
interest: '熬夜敲代码'
}
}
})
</script>
</body>
</html>
也可以提供第二个的参数为键名：
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
第三个参数为索引：
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>v-for 迭代整数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - v-for 迭代整数</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="n in 5">
{{ n }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>v-for 迭代数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - v-for 迭代数组</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="n in [2,4,6]">
{{ n }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的track-by="$index" 。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用v-bind 来绑定动态值 (在这里使用简写)：
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>v-for
时提供
key
，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
