v-for的使用

let html = '<ul>'
for (const v of [0,1,2]) {
  html += `<li>row ${v}</li>`
}
html += '</ul>'

结果

复制<ul>
  <li>row 0</li>
  <li>row 1</li>
  <li>row 2</li>
</ul>

vue语法

复制<ul>
  <li v-for="(v, k) in [0,1,2]" :key={k}>row {{v}}</li> 
</ul>

复制<ul>
  <li v-for="(v, k) in {a:1, b:2, c:3}" :key={k}>row {{v}}</li> 
</ul>

在 v-for 里使用范围值

v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。

复制<span v-for="n in 3">{{ n }}</span>

key值的作用

相同父元素的子元素必须有独特的 key，重复的 key 会造成渲染错误，key应唯一。

Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

因此，正式的项目我们不建议用数组的index来作为key。