使用vue+vant制作的一个个人信息展示页面

使用vue+vant制作的一个个人信息展示页面

本文讲解如何使用vue+vant制作一个个人信息展示的页面

代码讲解

效果展示

好的，以下是加入详细注释后的代码：

<template>
  <!-- 顶部导航栏 -->
  <van-nav-bar title="个人信息" />

  <!-- 用户头像区域 -->
  <div class="top">
    <van-image
      round   // 圆角样式
      width="10rem"
      height="10rem"
      fit="cover"   // 图片拉伸方式为覆盖
      position="center"   // 居中对齐
      :src="user.avatar"  // 通过数据动态绑定用户头像地址
    />
  </div>

  <!-- 使用列表显示用户信息 -->
  <van-cell-group>
    <van-cell title="用户名" :value="user.username" />
    <van-cell title="角" :value="user.role" />
    <van-cell title="年级" :value="user.grade + '年级'" />   <!-- 在年级上添加“年级”文字 -->
  </van-cell-group>

  <van-card-footer class="card-footer">{{ message }}</van-card-footer>
</template>

<script>
export default {
  data() {
    return {
      user: {
        id: 1,                                   // 用户 ID
        username: "zhangsan",                     // 用户名
        password: "12456",                       // 密码（仅用于演示，实际应用中应该使用安全的密码机制）
        avatar: ".lUXUqc48bFDvTQ-M4zdzUQHaE0?w=278&h=180&c=7&r=0&o=5&dpr=1.8&pid=1.7",  // 用户头像地址
        grade: 8,                                 // 年级
        role: "student"                           // 角
      },
      message: '更多详细信息，请联系管理员获取'   // 可自定义底部提示信息
    };
  },
};
</script>

<style scoped>
.top {
  display: flex;            
  justify-content: center;   /* 水平居中 */
}
.card-footer {
  text-align: right;
  font-size: 14px;
  color: #999;
}
</style>

在这个代码中，我们添加了以下注释：

• van-image ：通过 round 属性设置圆角样式、fit="cover" 设置宽高自适应并覆盖父元素、position="center" 居中显示用户头像；
• van-cell title ：设置标题，如“用户名”、“角”、“年级”等；
• van-cell :value ：通过模板插值的方式使用数据对象中的属性填充值，并在年级值后面添加字符串“年级”；
• data() 中的 user 对象：包括用户 ID、用户名、密码、头像地址、年级和角等信息。

通过这些注释，您可以更清晰地了解 Vue.js 组件代码的处理过程及具体实现。