下面一段代碼給大家介紹vue實現個人信息查看和密碼修改功能，具體代碼如下所述：

//用了element組件，自己要加載和引入<template>   <div class="all-container">    <div class="all-container-padding bg" >     <el-tabs v-model="activeName" @tab-click="handleClick">     <el-tab-pane label="基本信息" name="first">      <el-form :model="userlist" :rules="rules" ref="EditorUserForms">        <el-form-item label="頭像" prop="avatar_url" :label-width="formLabelWidth">          <el-upload class="avatar-uploader" action="http://shujiaoke.oss-cn-hangzhou.aliyuncs.com" :before-upload="beforeupload" :data="uploadParm" :show-file-list="false" :on-success="handleUpSuccess">          <img v-if="userlist.avatar_url" :src="userlist.avatar_url" class="avatar">          <i v-else class="el-icon-plus avatar-uploader-icon " style="width:80px;height:80px;"></i>          </el-upload>        </el-form-item>        <el-form-item label="用戶名" prop="username" :label-width="formLabelWidth">         <el-col :span="8"> <el-input v-model="userlist.username" disabled ></el-input></el-col>        </el-form-item>        <el-form-item label="電話" prop="phone" :label-width="formLabelWidth">         <el-col :span="8">  <el-input v-model="userlist.phone" placeholder="請輸入電話"></el-input></el-col>        </el-form-item>        <el-form-item label="郵箱" prop="email" :label-width="formLabelWidth">         <el-col :span="8">  <el-input v-model="userlist.email" placeholder="請輸入郵箱"></el-input></el-col>        </el-form-item>        <el-form-item label="用戶角色" prop="full_name" :label-width="formLabelWidth">         <el-col :span="8">          <el-input v-model="userlist.full_name" disabled ></el-input>          </el-col>        </el-form-item>      </el-form>      <div class="grid-content bg-purple">       <el-button type="primary" @click="EditorUserClick('userlist')" >保存</el-button>      </div>     </el-tab-pane>     <el-tab-pane label="修改密碼" name="second">      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">       <el-form-item label="原密碼" prop="pass" :label-width="formLabelWidth">         <el-col :span="8">  <el-input v-model="ruleForm.pass" placeholder="請輸入原密碼" type="password"></el-input></el-col>        </el-form-item>        <el-form-item label="新密碼" prop="newpass" :label-width="formLabelWidth">         <el-col :span="8"><el-input v-model="ruleForm.newpass" placeholder="請輸入新密碼" id="newkey" type="password"></el-input></el-col>        </el-form-item>        <el-form-item label="重復新密碼" prop="checknewpass" :label-width="formLabelWidth">         <el-col :span="8">  <el-input v-model="ruleForm.checknewpass" placeholder="請再次輸入新密碼" id='newkey1' type="password"></el-input></el-col>        </el-form-item>        </el-form>        <div class="grid-content bg-purple">       <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>      </div>     </el-tab-pane>    </el-tabs>    </div>   </div></template><script>//這些不要在意，這些是我們自定義的接口，用的時候就直接拿來了import {fetchAll,fetchByID,fetchList,postData,putData,deleteByID,deleteAllByID,guid,bytesToSize} from "@/api/dbhelper";//這一步很重要，一般我們直接從后臺拿過來輸出來會是在data里面，但是我發現卻在store里面，這里就要用到vueximport { mapGetters } from "vuex";export default { data() {/*****檢驗兩次密碼是否一致***/  var validatePass = (rule, value, callback) => {   if (value === "") {    callback(new Error("請輸入密碼"));   } else {    if (this.ruleForm.checknewpass !== "") {     this.$refs.ruleForm.validateField("checknewpass");    }    callback();   }  };  var validatePass2 = (rule, value, callback) => {   if (value === "") {    callback(new Error("請再次輸入密碼"));   } else if (value !== this.ruleForm.newpass) {    callback(new Error("兩次輸入密碼不一致!"));   } else {    callback();   }  };  return {   uploadParm: {}, //圖片的上傳   ruleForm: {},//修改密碼的表單   activeName: "first",   loading: true,   baseUrl: process.env.BASE_API,   userlist: {},//用戶信息表單   formLabelWidth: "150px",  /***校驗***/   rules: {    phone: [     {      required: true,      message: "請輸入電話號碼"     },     {      pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])/d{8}$/,      message: "手機格式不對"     }    ],    email: [     {      required: true,      message: "請輸入電子郵箱"     },     {      pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((/.[a-zA-Z0-9_-]{2,3}){1,2})$/,      message: "請輸入有效的郵箱"     }    ],    pass: [     {      required: true,      trigger: "blur",      message: "請輸入密碼"     }    ],    newpass: [     {      validator: validatePass,      trigger: "blur"     }    ],    checknewpass: [     {      validator: validatePass2,      trigger: "blur"     }    ]   }  }; }, created() {  this.getUser();  this.upload(); }, computed: {  ...mapGetters(["username"]) }, methods: {  //獲取個人用戶的信息  getUser() {   postData("接口", this.username).then(response => {    if (response.status === 200) {     this.userlist = response.data;     this.loading = false;     console.log(this.userlist, 9696);    } else {     this.$message({      message: "獲取信息失敗," + response.message,      type: "error"     });    }   });  },  //tab切換  handleClick(tab, event) {   console.log(tab, event);  },  //上傳參數圖片初始化  upload() {   var currentTimeStamp = new Date().getTime() / 1000;   if (    this.uploadParams == null ||    this.uploadParams.expire + 3 < currentTimeStamp   ) {    this.$store     .dispatch("GetUploadParams")     .then(req => {      this.uploadParm = req.data;     })     .catch(err => {      this.$message({ message: err.message, type: "warning" });     });   } else {    this.uploadParm = this.uploadParams;   }  },  //上傳之前  beforeupload(file) {   this.uploadParm.key = this.uploadParm.dir + guid();   // console.log(this.uploadParm)  },  //圖片上傳上傳成功  handleUpSuccess(response, file, fileList) {   var newfile = {    name: file.name,    type: file.raw.type,    size: bytesToSize(file.size),    url: this.uploadParm.key   };   postData("file", newfile).then(response => {    if (response.status == 200) {     this.$message({ message: "修改成功", type: "success" });     this.userlist.style_file_id = response.data.id;     this.userlist.avatar_url = this.baseUrl + response.data.url;    } else {     this.$message({ message: "修改失敗", type: "error" });    }   });   console.log(this.userlist);  },  //修改密碼  submitForm(ruleForm) {   var obj = {    username: this.username,    oldpwd: this.ruleForm.pass,    newpwd: this.ruleForm.newpass   };   console.log(obj);   postData("接口", obj).then(response => {    if (response.status == 200) {     this.$message({      message: "保存成功",      type: "success"     });    } else {     this.$message({      message: "修改失敗" + response.message,      type: "error"     });    }   });  },  // 編輯提交的方法  EditorUserClick() {   this.$refs.EditorUserForms.validate(valid => {    if (valid) {     console.log(this.userlist);     putData("接口", this.userlist).then(response => {      if (response.status == 200) {       this.$message({        message: "編輯成功",        type: "success"       });      } else {       this.$message({        message: "修改失敗" + response.message,        type: "error"       });      }     });    }   });  } }};</script>