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

超、凢脫俗 2024-03-16 16:24 100阅读 0赞

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

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

### 代码讲解 ###

效果展示  
![在这里插入图片描述][759b6283ef84448f998fae87706d080a.png]  
好的，以下是加入详细注释后的代码：

<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: "123456",                       // 密码（仅用于演示，实际应用中应该使用安全的密码机制）
            avatar: "https://tse4-mm.cn.bing.net/th/id/OIP-C.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 组件代码的处理过程及具体实现。

[759b6283ef84448f998fae87706d080a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/296630e84da344759290a4e8221e48ca.png