一、问题描述

  每次刷新页面,下面的内容就会一闪而过。

  一闪而过后恢复正常:

二、解决

 问题代码:

@*<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>

  

iview 刷新滞后于html问题的更多相关文章

  1. 【Canal源码分析】Sink及Store工作过程

    一.序列图 二.源码分析 2.1 Sink Sink阶段所做的事情,就是根据一定的规则,对binlog数据进行一定的过滤.我们之前跟踪过parser过程的代码,发现在parser完成后,会把数据放到一 ...

  2. mysql 数据库主从同步

    1.简介 写这篇文章是网上找到的相关主从同步的都不够完全,本人第一次搭建主从同步,完全看着网上的文章来搭建的,结果你懂的,踩了很多坑.所以特地把踩到的坑写出来,新手切勿直接布置到正式环境,请于测试环境 ...

  3. Caching漫谈--关于Cache的几个理论【转】

    转自:https://www.cnblogs.com/asis/p/cache-pattern.html 如今缓存是随处可见了,如果你的程序还没有使用到缓存,那可能是你的程序并发量很低,或对实时性要求 ...

  4. Caching漫谈--关于Cache的几个理论

    如今缓存是随处可见了,如果你的程序还没有使用到缓存,那可能是你的程序并发量很低,或对实时性要求很低.我们公司的ERP在显示某些报表时,每次打开都需要花上几分钟的时间,假如搜索引擎也是这么慢,我想这家搜 ...

  5. Linux--系统调优

    建议看看:https://www.cnblogs.com/yinzhengjie/p/9994207.html 一.关闭swap交换分区 Linux swapoff命令用于关闭系统交换区(swap a ...

  6. (八)JSP 技术知识点总结(来自那些年的笔记)

    目录 什么是 jsp Jsp 调用和运行原理(简略版) Jsp语法 Jsp指令简介 Page指令 Include指令 taglib指令 Jsp乱码问题 jsp运行原理(详细版) JSP中的九大隐式对象 ...

  7. 【深入理解计算机系统CSAPP】第六章 存储器层次结构

    6 存储器层次结构 存储器系统(memory system)是一个具有不同容量.成本和访问时间的存储设备的层次结构.CPU 寄存器保存着最常用的数据.靠近 CPU 的小的.快速的高速缓存存储器(cac ...

  8. 基于 iframe 的微前端框架 —— 擎天

    vivo 互联网前端团队- Jiang Zuohan 一.背景 VAPD是一款专为团队协作办公场景设计的项目管理工具,实践敏捷开发与持续交付,以「项目」为核心,融合需求.任务.缺陷等应用,使用敏捷迭代 ...

  9. Hadoop原理介绍

    Hadoop核心之HDFS 架构设计   老嗨 2015-09-18 16:55:00 浏览225 评论0 摘要: 概述:HDFS即Hadoop Distributed File System分布式文 ...

随机推荐

  1. suse下修改主机名

    export HOSTNAME=主机名 echo $HOSTNAME>/etc/HOSTNAME /etc/rc.d/boot.localnet stop /etc/rc.d/boot.loca ...

  2. [Solution] JZOJ-5806 简单的操作

    [Solution] JZOJ-5806 简单的操作 题面 Description 从前有个包含n个点,m条边,无自环和重边的无向图. 对于两个没有直接连边的点u;v,你可以将它们合并.具体来说,你可 ...

  3. 1.1初识python

    1.目前大量的公司都在使用python,功能强大很是牛逼! 2.运维要懂开发,做个全栈的工程师贼牛逼 3.python是一个解释型语言,编译型和解释型的区别是: ①编译型语言由编译器(Compiler ...

  4. 展示博客---Alpha版本展示

    Alpha版本展示 1. 团队成员的简介和个人博客地址,团队的源码仓库地址. 成员 简介 个人博客地址 祁泽文 被动态统计图搞扒下的我 http://www.cnblogs.com/jiaowoxia ...

  5. windows基于vs2017的opencv安装

    1.opencv下载与安装 1.下载地址:官网下载地址https://opencv.org/releases.html   opencv为开源软件,可直接在官网下载最新版本. 2.软件安装:openc ...

  6. uniGUI经验几则

    uniGUI经验几则 (2015-11-07 21:42:41) 转载▼ 标签: it 分类: uniGUI 1.uniTimer的妙用 很多时候,都会遇到在一个uniForm或者uniFrame加载 ...

  7. Delphi - TDateTimePicker使用注意问题

    TDateTimePicker使用时候,如果想获取到修改后的值,必须注Kind和time属性必须对应! 1,时间设置: treatmentTime1DTPicker.Kind := dtkTime; ...

  8. appium定位之xpath定位

    前面也说过appium也是以webdriver为基的,对于元素的定位也基本一致,只是增加一些更适合移动平台的独特方式,下面将着重介绍xpath方法,这应该是UI层元素定位最强大的方法啦! 以淘宝app ...

  9. 前端自动化部署方案-实践(配合shell)

    以下实例项目为vue项目,其他项目当然也雷同咯 在项目中建一个这个么脚本文件 不说了,上代码 #!/bin/sh handle=$1; env=$2; # 远程部署机 webhook # 如果用远程机 ...

  10. [Swift]扩展UIImage :获取图片指定像素的颜色值

    对[UIImage]进行扩展 import UIKit extension UIImage{ /** 根据坐标获取图片中的像素颜色值 */ subscript (x: Int, y: Int) -&g ...