vue 遍历list

作者：Alexandr嫁衣° 发布日期:2025-04-06 浏览:124

<template>
  <div>
    <ul>
      <!-- 使用 v-for 指令遍历 list 数组 -->
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义一个 list 数组，包含一些示例数据
      list: ['苹果', '香蕉', '橙子', '葡萄']
    };
  }
};
</script>

<style scoped>
/* 这里可以添加一些样式 */
ul {
  list-style-type: none;
}
</style>

解释说明：

v-for 是 Vue.js 中用于遍历数组或对象的指令。
在模板中，我们使用 v-for="(item, index) in list" 来遍历 list 数组。item 表示当前遍历到的元素，index 表示当前元素的索引。
:key="index" 是为了给每个生成的元素提供一个唯一的标识符，这有助于 Vue 更高效地更新 DOM。
{{ item }} 用于在模板中显示当前遍历到的元素内容。
在 data 函数中，我们定义了一个 list 数组，包含了一些水果名称作为示例数据。

上一篇：typescript vue

下一篇：vue json.stringify