1 最基础的循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的列表渲染</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="item of userInfo">
{{item}}
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
userInfo: [
"Java",
"18",
"male",
"secret"
]
}
})
</script>
</body>
</html>效果：
加上索引：
<div id="app">
<!-- <div v-for="item of userInfo">-->
<!-- {{item}}-->
<!-- </div>-->
<div v-for="(item, index) of userInfo">
{{item}} --- {{index}}
</div>
</div>效果：
为了提升循环的性能，为每个项目加 key：
<div id="app">
<div v-for="(item, index) of userInfo" :key="index">
{{item}} --- {{index}}
</div>
</div>不推荐使用 index 作为 key
在Vue中，key属性是用于标识每个节点的唯一性，以便在更新节点时进行高效的比较和渲染。使用索引作为key可能会导致性能问题和不必要的重新渲染。 当使用索引作为key时，如果在数组中插入或删除元素，则会导致索引发生变化，从而导致整个列表的重新渲染，这会影响性能。此外，使用索引作为key还可能导致在某些情况下出现错误的渲染结果。 因此，Vue官方不推荐将索引作为key。相反，建议使用具有唯一标识符的属性作为key，例如id、uuid等。这样可以确保key的唯一性，从而避免性能问题和渲染错误。
一般后端给前端传 list 值时，都有唯一 id：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的列表渲染</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item, index) of userInfo"
:key="item.id">
{{item.text}} --- {{index}}
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
userInfo: [{
id: "Java",
text: "18"
},{
id: "Edge",
text: "19"
},{
id: "公众号",
text: "20"
}
]
}
})
</script>
</body>
</html>效果：
2 数组操作
不能直接在控制台使用list[4] = "xxx"这种利用下标新增元素，页面不会跟着渲染新增的元素的。
只能通过给的 API 操作：
API操作修改元素：
3 多次循环
现在还想循环 span 标签：
<div id="app">
<div v-for="(item, index) of userInfo"
:key="item.id">
{{item.text}} --- {{index}}
</div>
<span v-for="(item, index) of userInfo"
:key="item.id">
{{item.text}}
</span>
</div>可这样循环两次，未免浪费性能啊！
最直观的，有人说外层再套一层，就实现了只循环一次：
<div id="app">
<div v-for="(item, index) of userInfo"
:key="item.id">
<div>
{{item.text}} --- {{index}}
</div>
<!-- 现在还想循环 span 标签 -->
<span>
{{item.text}}
</span>
</div>
</div>可就多了一个 div 标签呀，我强迫症啊，就不想多加一层标签元素。
<template v-for="(item, index) of userInfo"
:key="item.id">
<div>
{{item.text}} --- {{index}}
</div>
<!-- 现在还想循环 span 标签 -->
<span>
{{item.text}}
</span>
</template>你看，这样就不需要再加一层 div 了：
4 对象循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的列表渲染 - 对象循环</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item, key, index) of userInfo">
{{item}} --- {{key}} -- {{index}}
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
userInfo: {
name: "Java",
age: 28,
gender: "小黑子",
salary: "secret"
}
}
})
</script>
</body>
</html>如何修改对象呢？userInfo是个引用，修改其引用指向内容即可：
