vue.js项目实战运用篇之抖音视频APP-第十二节：用户信息页面功能

本文链接：https://blog.youkuaiyun.com/My_IT_Study/article/details/117283931

本文介绍如何在Vue.js项目中实现抖音视频APP的用户信息页面，包括页面布局、样式设计、资料编辑功能。通过分析页面结构，设置路由跳转，实现场景交互。读者可以在GitHub上找到项目源码进行学习和交流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。

【项目地址】
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。
项目地址：GitHub

第十二节：用户信息页面功能

页面分析

用户信息页面是底部导航我的跳转到用户信息，其中包含了个人资料编辑、个人信息展示、作品管理区能功能。
实现步骤：
1.页面布局及样式
2.资料编辑

功能实现

页面布局及样式

1.页面布局，代码如下：

<template>
  <!-- 我的页面内容 -->
  <div class="me">
    <!-- 背景图内容 -->
    <div class="me-top" :style="bgPic">
      <!-- 右侧菜单栏 -->
      <div class="menu-box">
        <i class="iconfont icon-update"></i>
      </div>
       <div class="menu-box">
        <div class="menu-icon"></div>
      </div>
    </div>
    <!-- 信息内容 -->
    <div class="me-wrap">
      <!-- 个人信息 -->
      <div class="me-content">
        <div class="info">
          <!-- 头像 -->
          <img class="info_img" src="../../assets/images/avatar-1.jpg" alt />
          <button class="btn" @click="editInfo">编辑资料</button>
          <button class="btn">+朋友</button>
        </div>
        <!-- 标签内容 -->
        <div class="des">
          <span class="dy_name">enjsky</span>
          <span class="span_dy">私密账号 · 抖音号：xxxxxx <i class="iconfont icon-erweima"></i></span>
        </div>
        <div class="user-tag">
          <p>你还没有填写个人简介，点击添加...</p>
          <span>23岁</span>
          <span>深圳</span>
          <span>+添加学校等标签</span>
        </div>
        <!-- 人气信息 -->
        <div class="user-tag2">
          <span>
            <a>5200</a>获赞
          </span>
          <span>
            <a>150</a>关注
          </span>
          <span>
            <a>520W</a>+粉丝
          </span>
        </div>
        <div class="me-ab">
          <div class="me_ab_i"><i class="iconfont icon-gouwuche"></i></div>
          <div class="me_ab_span">
            <span class="span_title">抖音商城</span>
            <span class="span_tab">发现超值好物</span>
          </div>
        </div>
      </div>
      <!-- 个人作品收藏信息 -->
      <div class="me-tab">
        <!<