vue怎样做出密码修改与个人信息查看功能

这次给大家带来vue怎样做出密码修改与个人信息查看功能，vue做出密码修改与个人信息查看功能的注意事项有哪些，下面就是实战案例，一起来看一下。

下面一段代码给大家介绍vue实现个人信息查看和密码修改功能，具体代码如下所述：

//用了element组件，自己要加载和引入   
    
                                                                                                                                                                                                                 
       保存      
                                                                                                              
       保存      
             
   
//这些不要在意，这些是我们自定义的接口，用的时候就直接拿来了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  {      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"       });      }     });    }   });  } }};

登录后复制

点击查看vue实现密码显示隐藏切换功能

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

ES6中Promise使用步骤详解

怎样用React Form完成组件封装

以上就是vue怎样做出密码修改与个人信息查看功能的详细内容，更多请关注【创想鸟】其它相关文章！