标签:分享 cas sub nal alt 代码 script get input
一、问题描述
每次刷新页面,下面的内容就会一闪而过。
一闪而过后恢复正常:
二、解决
问题代码:
@*<span>修改密码</span>*@
@*<span>{{myWord.personInfo}} </span>*@
改为v-html,在iveiw中方法执行后赋值。
<span v-html="myWord.personInfo"></span>
data : {
myWord:{
personInfo: ‘个人信息‘,
changePassword: ‘修改密码‘,
submit: ‘提交‘,
cancel: ‘取消‘
},
同样的问题还出现在很多地方。
三、完整代码:
@{ ViewBag.Title = "个人中心"; Layout = "~/Views/Shared/_LayoutNotFooter.cshtml"; } <style> .main-container { overflow-y: hidden; } </style> <div id="personalCenterDiv"> <div style="background:#eee;padding:20px" > <Card style="width:100%;"> <p slot="title"> <Icon type="person"></Icon> @*<span>修改密码</span>*@ @*<span>{{myWord.personInfo}} </span>*@ <span v-html="myWord.personInfo"></span> </p> <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100" > <form-item label="用户名" prop="UserName"> <span v-html="formValidate.UserName"></span> </form-item> <form-item label="用户类型"> <span v-html="formValidate.TypeID"></span> </form-item> <form-item label="密码" > <i-button type="ghost" v-on:click="modal1=true"> <span v-html="myWord.changePassword"></span> </i-button> </form-item> <form-item label="真实姓名" prop="RealName"> <i-input v-model="formValidate.RealName" style="width:300px"></i-input> </form-item> <form-item label="工作单位" prop="Company"> <i-input v-model="formValidate.Company" style="width:300px"></i-input> </form-item> <form-item label="出生日期" prop="BirthDate"> <date-picker type="date" v-model="formValidate.BirthDate" ></date-picker> </form-item> <form-item label="手机" prop="Phone"> <i-input v-model="formValidate.Phone" style="width:300px"></i-input> </form-item> <form-item label="固定电话" prop="TelPhone"> <i-input v-model="formValidate.TelPhone" style="width:300px"></i-input> </form-item> <form-item label="联系地址" prop="Address"> <i-input v-model="formValidate.Address" style="width:300px"></i-input> </form-item> <form-item> <i-button type="primary" v-on:click="handleSubmit(‘formValidate‘)"> <span v-html="myWord.submit"></span> </i-button> <i-button type="ghost" v-on:click="handleReset(‘formValidate‘)" style="margin-left: 8px"> <span v-html="myWord.cancel"></span> </i-button> </form-item> </i-form> </Card> <Modal v-model="modal1" title="修改密码" v-on:on-ok="okClick(‘formPassword‘)" v-on:on-cancel="cancelClick(‘formPassword‘)"> <i-form ref="formPassword" :model="formPassword" :rules="ruleformPassword" :label-width="100"> <form-item label="原密码" prop="OldPassword"> <i-input v-model="formPassword.OldPassword" style="width:200px"></i-input> </form-item> <form-item label="新密码" prop="Password"> <i-input v-model="formPassword.Password" style="width:200px"></i-input> </form-item> <form-item label="确认新密码" prop="Password2"> <i-input v-model="formPassword.Password2" style="width:200px"></i-input> </form-item> </i-form> </Modal> </div> </div> <script type="text/javascript"> var vmUserInfo = new Vue({ el: ‘#personalCenterDiv‘, data : { modal1: false, // modal2: false, formValidate: { UserName: ‘‘, RealName: ‘‘, Company: ‘‘, BirthDate: ‘‘, Phone: ‘‘, TelPhone: ‘‘, Address: ‘‘, TypeID: ‘‘ }, myWord:{ personInfo: ‘个人信息‘, changePassword: ‘修改密码‘, submit: ‘提交‘, cancel: ‘取消‘ }, formPassword: { OldPassword: ‘‘, Password: ‘‘, Password2: ‘‘ }, ruleValidate: { UserName: [ { required: true, message: ‘用户名不能为空!‘, trigger: ‘blur‘ } ], RealName: [ { required: true, message: ‘真实姓名不能为空!‘, trigger: ‘blur‘ } ], Company: [ { required: true, message: ‘工作单位不能为空!‘, trigger: ‘blur‘ } ], BirthDate: [ { required: true, type: ‘date‘, message: ‘出生日期不能为空!‘, trigger: ‘change‘ } ], Phone: [ { required: true, message: ‘手机号不能为空!‘, trigger: ‘blur‘ } ], TelPhone: [ { required: true, message: ‘固定电话不能为空!‘, trigger: ‘blur‘ } ], Address: [ { required: true, message: ‘联系地址不能为空!‘, trigger: ‘blur‘ } ] }, ruleformPassword: { OldPassword: [ { required: true, message: ‘原密码不能为空!‘, trigger: ‘blur‘ } ], Password: [ { required: true, message: ‘新密码不能为空!‘, trigger: ‘blur‘ } ], Password2: [ { required: true, message: ‘确认密码不能为空!‘, trigger: ‘blur‘ } ] } }, created: function () { }, methods: { handleSubmit:function(name) { var that = this; this.$refs[name].validate(function(valid) { //console.dir(valid); //非空校验通过 if (valid) { var getData = { UserName: that.formValidate.UserName, RealName: that.formValidate.RealName, Company: that.formValidate.Company, BirthDate: that.formValidate.BirthDate, Phone: that.formValidate.Phone, TelPhone: that.formValidate.TelPhone, Address: that.formValidate.Address } //console.dir(getData); that.$http.post(‘@Url.Action("SetLoginUserInfo", "Account")‘, getData).then(function (result) { if (result.data.success) { that.instance("success", "提交成功!"); } else { that.instance("error", "提交失败!"); } }, function (response) { }); } else { that.instance("warning", "不能存在空值!") } }) }, handleReset: function(name) { this.$refs[name].resetFields(); window.location = ‘/Ecology‘; }, okClick: function(name) { var that = this; //非空校验 this.$refs[name].validate(function (valid) { // console.dir(valid); if (valid) { var getData = { UserName: that.formValidate.UserName, OldPassword: that.formPassword.OldPassword, Password: that.formPassword.Password, Password2: that.formPassword.Password2 } // console.dir(getData); that.$http.post(‘@Url.Action("SetUserPassword", "Account")‘, getData).then(function (result) { // console.dir(result.data.msg); if (result.data.success) { that.instance("success", result.data.msg); ; } else { // console.log("error:SetUserPassword"); that.instance("error", result.data.msg); } }, function (response) { }); } else { that.instance("warning", "三者都不能为空!"); } }); //vmUserInfo.formPassword.OldPassword = ‘‘; //vmUserInfo.formPassword.Password = ‘‘; //vmUserInfo.formPassword.Password2 = ‘‘; //删除密码信息 this.$refs[name].resetFields(); }, cancelClick: function (name) { this.$refs[name].resetFields(); }, instance: function (type, message) { const title = ‘提示信息:‘; const content = ‘<p>‘ + message + ‘</p>‘; switch (type) { case ‘info‘: this.$Modal.info({ title: title, content: content }); break; case ‘success‘: this.$Modal.success({ title: title, content: content }); break; case ‘warning‘: this.$Modal.warning({ title: title, content: content }); break; case ‘error‘: this.$Modal.error({ title: title, content: content }); break; } } }, mounted: function () { var that = this; that.$http.post(‘@Url.Action("GetLoginUserInfo", "Account")‘, {}).then(function (result) { // console.dir(result); if (result.data.success == true) { if (result.data.rows != undefined && result.data.rows != null) { if (result.data.rows.TypeID != null) { if (result.data.rows.TypeID == 1) { vmUserInfo.formValidate.TypeID = "普通用户"; } else if (result.data.rows.TypeID == 2) { vmUserInfo.formValidate.TypeID = "管理员"; } } vmUserInfo.formValidate.UserName = result.data.rows.UserName; vmUserInfo.formValidate.RealName = result.data.rows.RealName; vmUserInfo.formValidate.Company = result.data.rows.Company; vmUserInfo.formValidate.BirthDate = result.data.rows.BirthDate; vmUserInfo.formValidate.Phone = result.data.rows.Phone; vmUserInfo.formValidate.TelPhone = result.data.rows.TelPhone; vmUserInfo.formValidate.Address = result.data.rows.Address; } } else { // console.log("error:GetLoginUserInfo"); } }, function (response) { }); } }); </script>
标签:分享 cas sub nal alt 代码 script get input
原文地址:https://www.cnblogs.com/hao-1234-1234/p/8868328.html