vue 解决页面闪烁问题
watch: { //监听表格数据的变化【使用 watch+nextTick 可以完成页面数据监听的 不会出现闪烁】
tableData: { //深度监听,可监听到对象、数组的变化
handler(val, oldVal) {
this.$nextTick(function() {
var that = this;
var thisSelTreeData = that.tableSelTreeData;
for(var j = 0; j < thisSelTreeData.length; j++) {
if(thisSelTreeData[j].data.length > 0) {
var thisHtml = "";
for(var i = 0; i < thisSelTreeData[j].data.length; i++) {
thisHtml += '<div class="ivu-tag ivu-tag-checked"><span class="ivu-tag-text">' + thisSelTreeData[j].data[i] + '</span> <i class="ivu-icon ivu-icon-ios-close-empty" onclick="removeThis(this,' + j + ',\'' + thisSelTreeData[j].data[i] + '\')"></i > </div>';
}
//选中的值 渲染到页面
$("body").find("#" + thisSelTreeData[j].treeId).parent().parent().siblings().children("div").html(thisHtml);
} else {
$("body").find("#" + thisSelTreeData[j].treeId).parent().parent().siblings().children("div").html('<span class="ivu-select-placeholder">请选择</span>');
}
}
}) },
deep: true
}
},
使用watch 监听数据的变化 配合 this.$nextTick(在同一事件循环中的数据变化后,DOM完成更新,立即执行nextTick(callback)内的回调。)
vue 解决页面闪烁问题的更多相关文章
- 解决vue渲染时闪烁{{}}的问题
原文转自: 点我 Vue页面加载时v-show设置的隐藏元素出现导致页面闪烁问题在写APP社区页面的时候在一些地方用了v-show,在刷新页面的时候就发现即便在逻辑判断为false某些元素不该显示时也 ...
- fullpage在vue单页面当中使用会出现的问题以及解决办法
在 vue 单页面当中发现fullpage会报错,报错信息大概意思为,fullpage不允许初始化多次. 解决办法,在使用fullpage的组件跳转路由进入销毁组件之前的生命周期的时候对fullpag ...
- 在不使用ssr的情况下解决Vue单页面SEO问题
遇到的问题: 近来在写个人博客的时候遇到了大家可能都会遇到的问题 Vue单页面在SEO时显得很无力,尤其是百度不会抓取动态脚本 Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充 ...
- 解决页面初始化vue加载代码问题
<style type="text/css"> /* 解决页面初始化vue加载代码问题 */ [v-cloak] { display: none; } </sty ...
- VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...
- 前端(二十一)—— vue指令:文本类指令、避免页面闪烁、v-bind指令、v-on指令、v-model指令、条件渲染指令、列表渲染指令
文本类指令.v-bind指令.v-on指令.v-model指令.条件渲染指令.列表渲染指令 一.文本操作 v-text:文本变量 <p v-text='msg'></p> &l ...
- vue之页面缓存问题(基于2.0)
为什么会有这篇文章 在vue2.0中出现了列表页面是每次都重新加载数据,但是详情页面却只在第一次加载的时候调用数据,如果返回到列表再进入详情那么页面是不会重新渲染页面. 1 用vue-router 重 ...
- 关于Vue 刷新页面
前言 Vue 中是单页面,当然需要刷新数据咯 你一定遇到这样的需求::比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者 这个页面有个组件 ,但是这个组件里面的点击事件还是到当前页面 怎么就 ...
- 处理 Vue 单页面应用 SEO 的另一种思路
vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...
随机推荐
- 介绍Collection框架的结构;Collection 和 Collections的区别
介绍Collection框架的结构:Collection 和 Collections的区别 集合框架: Collection:List列表,Set集 Map:Hashtable,HashMap,Tre ...
- 可变,不可变与 id 的关系
变量名不能使用关键字: 查看关键字 import keyword keyword.kwlist 可变与不可变: 列表添加元素后,id并不会改变.说明列表可变 元祖添加元素后,id会改变,就不是同一对 ...
- FreeMarker的空值运算符和逻辑运算符
1.空值处理运算符 如果你在模板中使用了变量但是在代码中没有对变量赋值,那么运行生成时会抛出异常.但是有些时候,有的变量确实是null,怎么解决这个问题呢? 判断某变量是否存在:“??” 用法为:va ...
- HTTP 416
真是活久见, 竟然遇到了HTTP 416 参照 http://baike.baidu.com/view/1790469.htm , Requested Range Not Satisfiable 如果 ...
- hive设置参数的方法
1.修改环境变量 ${HIVE_HOME}/conf/hive-site.xml 2.命令行参数 -e : 执行短命令 -f : 执行文件(适合脚本封装) -S : 安静模式,不显示MR的运行过程 ...
- 35. Oracle监听器启动出错:本地计算机上的OracleOraDb11g_home1TNSListener服务启动后又停止了解决方案
一.原因分析 你安装oracle的时候是连网的,那么listener.ora文件里的HOST=网络给你分配的IP地址,而在你断网的时候就会出现这样的情况. 三.解决办法 方法一:监听器 通过liste ...
- leetcode1020
class Solution(object): def __init__(self): self.cons = 0 self.S = list() def dfs(self,m,n,v,A): whi ...
- 玩转音频、视频的利器:FFmpeg
导语 当下直播平台发展十分迅猛,依靠游戏内直播平台的发展带动游戏活跃提升收入,那么对于我们开发来说如何玩转视频呢?下面就来介绍一个音频.视频处理利器——FFmpeg. FFmpeg 简介 FFmpeg ...
- JDK7和JDK8concurrentHashmap区别
哈希表 1.介绍 哈希表就是一种以 键-值(key-indexed) 存储数据的结构,我们只要输入待查找的值即key,即可查找到其对应的值. 哈希的思路很简单,如果所有的键都是整数,那么就可以使用一个 ...
- WPF ListView即时更新
1.ListView 的 ItemSource 使用 BindingList < T >: 注:由于 List < T > 没有实现 INotifyPropertyChange ...