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 ...
随机推荐
- 图算法之——dijkstra算法
一.算法特点 目标:找出加权图中前往X的最短路径 适用于:无环有向加权图,且各边的权值为正 二.算法思路 三.算法示例演示 如下图,请找出结点v1到其他各个结点的最短路径: 首先创建一个字典(散列表) ...
- LeetCode 2. add two numbers && 单链表
add two numbers 看题一脸懵逼,看中文都很懵逼,链表怎么实现的,点了debug才看到一些代码 改一下,使本地可以跑起来 # Definition for singly-linked li ...
- [UGUI]图文混排(六):点击区域
点击区域可以分成两部分来分析: 0.Rect 搜索api:Rect和Rect.Rect,可以知道: 在GUI和GUILayout中,Rect的原点在左上角,向右为x轴正方向,向下为y轴正方向: 除此之 ...
- FreeMarker之FTL指令
assign指令 此指令用于在页面上定义一个变量 (1)定义简单类型: <#assign linkman="周先生"> 联系人:${linkman} (2)定义对象类型 ...
- zookeeper(3) zookeeper的实践及原理
一.基于java API初探zookeeper的使用 (1)建立连接 public static void main(String[] args) { //NOT_CONNECTED-->CON ...
- Andriod开发第一步-部署环境(搬运&&总结)
第一步:安装JDK 第二步:配置Windows上JDK的变量环境 第三步:下载安装Eclipse 第四步:下载安装Android SDK 配置了JDK变量环境, ...
- windows服务器自动删除日志文件
https://blog.csdn.net/u010050174/article/details/72510367 步骤: 1.新建 一个bat脚本 2.添加到window执行计划中,进行每日执行. ...
- Android 组合控件
前言 自定义组合控件就是多个控件组合起来成为一个新的控件,主要用来解决多次重复的使用同一类型的布局.比如我们应用的顶部的标题栏,还有弹出的固定样式的dialog,这些都是常用的,所以把他们所需要的控件 ...
- SpringMVC源码学习之request处理流程
目的:为看源码提供调用地图,最长调用逻辑深度为8层,反正我是springMVC源码学习地址看了两周才理出来的. 建议看完后还比较晕的,参照这个简单的模型深入底层,仿SpringMVC自己写框架,再来理 ...
- Django之视图层介绍
1. 伪静态设置: 路由层: url('^index/$', views.index), url('^article/(?P<id>(\d+)).html/$', views.articl ...