vue 遍历

作者：海枯石烂有多久发布日期:2026-06-07 浏览:22

// 使用 v-for 指令遍历数组
<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>

<!-- 解释说明:
1. `v-for` 是 Vue.js 中用于遍历数组或对象的指令。
2. `(item, index)` 是解构赋值，`item` 表示当前元素，`index` 表示当前索引。
3. `:key="index"` 是为了给每个列表项提供一个唯一的标识符，提高渲染性能和避免潜在问题。
4. `{{ item.message }}` 用于插值显示每个元素的消息内容。
-->

上一篇：vue2 mixins

下一篇：vue jsonp