Vant Cell 单元格组件：列表布局的基石

Cell 是什么

van-cell 是 Vant 中最基础的布局组件，用于展示 列表中的一行——左边标题、右边内容、可跳转。几乎所有移动端页面都会用到它：设置页、个人中心、订单列表、收货地址……

基础用法

<van-cell title="单元格标题" />
<van-cell title="单元格标题" value="右侧内容" />
<van-cell title="单元格标题" label="描述信息" value="右侧内容" />

效果：左边粗体 title，下面灰色小字 label，右边 value。

跳转与箭头

<van-cell title="设置" is-link to="/settings" />
<van-cell title="收货地址" is-link @click="goAddress" />
<van-cell title="新消息通知" is-link arrow-direction="down" />

is-link 自动显示右侧箭头。to 支持 Vue Router 路由跳转。

图标、分组与卡片

<van-cell-group inset title="基本信息">
  <van-cell title="头像" value="..." icon="photo-o" is-link />
  <van-cell title="昵称" value="张三" icon="contact" is-link />
  <van-cell title="性别" icon="friends-o">
    <template #value>
      <van-radio-group v-model="gender">
        <van-radio name="male">男</van-radio>
        <van-radio name="female">女</van-radio>
      </van-radio-group>
    </template>
  </van-cell>
</van-cell-group>

• van-cell-group：包裹多组 Cell，支持 title 分组标题
• inset：让 Cell 变成圆角卡片样式（iOS 风格）
• icon：左侧图标名
• Cell 内部可以放 van-switch、van-checkbox 等组件

实战：设置页面模板

<template>
  <van-cell-group inset style="margin-top: 16px">
    <van-cell title="个人资料" is-link />
    <van-cell title="账号安全" is-link />
    <van-cell title="消息通知" is-link />
  </van-cell-group>
  <van-cell-group inset title="通用">
    <van-cell title="主题" :value="theme" is-link />
    <van-cell title="语言" value="简体中文" is-link />
    <van-cell title="清除缓存" :value="cacheSize" is-link />
    <van-cell title="关于我们" is-link />
  </van-cell-group>
  <div style="padding: 32px 16px">
    <van-button block type="danger" plain round @click="logout">退出登录</van-button>
  </div>
</template>

属性速查表