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 ...
随机推荐
- WPF圆角按钮与触发颜色变化
<Button x:Name="button1" Content="按钮1" Margin="10,10,0,0" Cursor=&q ...
- django中路由系统和视图的对应关系(值的传递)-->主要内容(位置参数、关键字参数、额外参数、include分组[urls的分发]、命名分组、反向解析、APPEND_SLASH)
路由系统也就是 urls.py文件,视图就是 views.py文件 路由系统里面要注意的事项 urlpatterns中的元素按照书写顺序从上往下逐一匹配正则表达式,一旦匹配成功则不再继续. 若要从UR ...
- apache伪静态规则解析
apache伪静态规则解析 最近有个客户有个要求,昨天折腾了一会,没解决,今天没啥就多学习学习 还是根据例子来学习比较快 1 简单的重定向规则 RewriteEngine On //启动规则 Rewr ...
- 16.Mongodb安装
Mongodb是由c++编写的非关系型数据库,是一个基于分布式文件存储的开源数据库系统,其内容存储形式类似JSON对象,它的字段值可以包含其他文档.数组及文档数组,非常灵活. 1.相关链接: http ...
- 42.纯 CSS 创作一个均衡器 loader 动画
原文地址: https://segmentfault.com/a/1190000015157160 感想: 不难,最简单的动画.拓展地址: https://scrimba.com/c/cWqVv9hd ...
- 《算法》第三章部分程序 part 1
▶ 书中第三章部分程序,加上自己补充的代码,包括单词频率统计,(单链表)顺序查找表,二分查找表 ● 单词频率统计 package package01; import edu.princeton.cs. ...
- FreeMarker生成Word文档
FreeMarker简介: FreeMarker是一款模板引擎:即一种基于模板和要改变的数据,并用来生成输出文本(HTML网页.电子邮件.配置文件.源代码等)的通用工具,它不是面向最终用户的,而是一个 ...
- Python学习笔记_week1
一.编程语言的分类 编译型和解释型.静态语言和动态语言.强类型定义语言和弱类型定义语言,Python是一门动态解释型的强类型定义语言. Python的优缺点 Python解释器:CPython.IPy ...
- 选择、操作web元素-3
11月5日 Selenium 作业 3 登录 51job , http://www.51job.com 输入搜索关键词 "python", 地区选择 "杭州"( ...
- curl发送xml , xml和数组互转
public function postXml($url, array $data) { // pack xml $xml = $this->arrayToXml($data); // curl ...