vue中的v-for in
数组：
<body>
<div id="app">
<ul>
<li v-for="i in arr">
{{i}}
</li>
</ul>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
arr: ["b", "c", "a"]
}
})
</script>
</body>输出结果：
可见：vue中的v-for in遍历的是数组中的value
<ul>
<li v-for="(item, index) in arr">
{{index}}:{{ item }}
</li>
</ul>
for的第一个参数会返回数组中每个元素的值，而第二个参数是得到数组中元素的下标，结果：
对象：
<div id="app">
<ul>
<li v-for="(value, key) in object">
{{key}}:{{ value }}
</li>
</ul>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
object: { a: 1, b: 2, c: 3 }
}
})
</script>在遍历的对象时，for的第一个参数返回对象中的值，第二个参数返回键
js中的for in
数组：返回的是索引值0，1，2（尽量不用用它来操作数组）
let arr = ["b", "c", "a"];
for (let i in arr) {
console.log(i)
}对象：返回的是键值a，b，c
let object = { a: 1, b: 2, c: 3 };
for (let i in object) {
console.log(i);
}v-for :key的作用
在 Vue.js 中，使用 v-for 指令渲染列表时，推荐为每个列表项指定一个唯一的 key 属性识别每个元素的身份。key 应该是每个项目的唯一标识符，如数据库中的 ID 或者列表中的唯一值。这样，Vue 可以通过 key 来区分每个列表项，即使它们的内容或顺序发生变化。
当列表数据发生变化时（例如，项目添加、移除、排序），Vue 会根据新数据重新渲染列表。如果有 key，Vue 可以更准确地识别哪些元素是新的，哪些是被移动的，哪些是不变的。这样，Vue 可以尽量重用现有元素，而不是销毁旧元素并创建新元素，从而提高渲染效率。
608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
