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

引言

这里使用了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>