快速理解vuejs实现个人中心修改资料

最新推荐文章于 2024-06-22 10:12:59 发布

原创

最新推荐文章于 2024-06-22 10:12:59 发布 · 4.5k 阅读

26 ·

CC 4.0 BY-SA版权

本文介绍如何利用Vue.js和Element-UI组件来实现个人中心的资料修改功能，包括HTML结构、LESS样式和JavaScript逻辑。通过使用Element-UI的upload组件处理头像上传，并强调实际应用中需要与后端配合完成数据交互。

引言

这里使用了element-ui的upload组件，用于上传头像，代码有点多，请耐心读完。
需要引入element-ui，引入办法去官网瞄瞄就哦可了

具体实现部分

html部分

// 组件内容
<template>
  <div>
    <div class="update-info" v-show="!isshow">
       <div class="information">
         <p class="info-title">基本资料</p>
         <div class="info-head clearfix">
           <div class="info-avatar">
             <img :src="'api/' + infoForm.headpic" />
             <a @click="showBox" class="editor-txt"><span class="avatar-editor">编辑头像</span></a>
           </div>
           <div class="info-describ">
             <div class="info-nickname">{
   
   {
   
   nickName}}</div>
             <div class="info-complete">
               资料完整度：
               <span class="complete-percent text-center"><span class="percent">30%</span></span>
             </div>
           </div>
         </div>
         <el-form :model="infoForm" :rules="rules" ref="infoForm" label-width="100px">
           <el-form-item class="info-item" label="昵称:" prop="nickname">
             <el-input type="text" v-model="infoForm.nickname" ref="inputname"></el-input>
           </el-form-item>
           <el-form-item class=

最低0.47元/天解锁文章