vue for

作者：陌路情殇发布日期:2025-10-13 浏览:30

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item.message }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { message: 'Foo' },
        { message: 'Bar' },
        { message: 'Baz' }
      ]
    }
  }
}
</script>

解释说明：

v-for 是 Vue.js 中用于循环渲染列表的指令。
(item, index) in items：item 是当前项，index 是当前项的索引，items 是要遍历的数据源。
:key="index"：为每个列表项提供一个唯一的 key 属性，有助于 Vue 更高效地更新 DOM。
{{ item.message }}：在模板中插入 item 对象的 message 属性值。

上一篇：vue 动态style

下一篇：vue moment