下面一段代码给大家介绍vue实现个人信息查看和密码修改功能，具体代码如下所述：
//用了element组件，自己要加载和引入 <template> <p class="all-container"> <p 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="//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> <p class="grid-content bg-purple"> <el-button type="primary" @click="editoruserclick('userlist')" >保存</el-button> </p> </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> <p class="grid-content bg-purple"> <el-button type="primary" @click="submitform('ruleform')">保存</el-button> </p> </el-tab-pane> </el-tabs> </p> </p> </template> <script> //这些不要在意，这些是我们自定义的接口，用的时候就直接拿来了 import {fetchall,fetchbyid,fetchlist,postdata,putdata,deletebyid,deleteallbyid,guid,bytestosize} from @/api/dbhelper; //这一步很重要，一般我们直接从后台拿过来输出来会是在data里面，但是我发现却在store里面，这里就要用到vuex import { 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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样使用vue实现树形视图数据
js对dom树实现遍历有哪些方法
以上就是怎样使用vue实现个人信息查看与密码修改的详细内容。