Vant3 的 van-list 组件用于展示列表数据,可以在列表项之间添加分割线。以下是一个简单的例子,演示如何在 Vue 组件中使用 Vant3 的 List:
<template>
  <div>
    <!-- 使用 van-list 组件 -->
    <van-list>
      <!-- van-list-item 是列表的每一项 -->
      <van-list-item title="标题1" />
      <van-list-item title="标题2" />
      <van-list-item title="标题3" />

      <!-- 也可以添加更多的 van-list-item -->
    </van-list>
  </div>
</template>

<script>
export default {
  setup() {
    // 这里可以添加组件的相关逻辑

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

<style>
/* 这是一个简单的样式示例,你可以根据需求自定义样式 */
</style>

在上述代码中,我们使用了 van-list 组件,并在其中使用了 van-list-item 组件创建了列表的每一项。你可以在 van-list-item 中设置 title 属性来显示标题内容。

如果需要在列表项之间添加分割线,可以在 van-list 组件中使用 hairline 属性,设置为 true。

确保你的项目已经正确引入了 Vant3 并按照文档配置,以确保组件能够正常工作。


转载请注明出处:http://www.zyzy.cn/article/detail/5752/Vant