vue3 列表

作者：白话少年的痴情梦— 发布日期:2025-09-13 浏览:104

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

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref(['苹果', '香蕉', '橙子', '葡萄']);

    return {
      items
    };
  }
};
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 5px 0;
}
</style>

解释说明

模板部分 (<template>):
- 使用 v-for 指令遍历 items 数组，并为每个元素创建一个 <li> 列表项。
- :key="index" 绑定一个唯一的键值（这里使用索引作为键值，实际开发中建议使用唯一标识符）。
脚本部分 (<script>):
- 使用 Vue 3 的 Composition API 和 ref 函数定义一个响应式数组 items。
- 返回 items 以便在模板中使用。
样式部分 (<style scoped>):
- 定义了列表的样式，移除了默认的项目符号并添加了一些间距。

上一篇：vue3 globalproperties

下一篇：vue开发小程序