美文网首页Echarts
Echarts v-if触发第二次才能引起dom变化

Echarts v-if触发第二次才能引起dom变化

作者: 西瓜鱼仔 | 来源:发表于2020-07-28 14:45 被阅读0次

背景

点击按钮,触发了某个条件后才展示图表,刚开始我是使用v-if做的显示判断,但是出现了需要点击两次才会出现图表的情况。

原因

使用v-if来控制dom,在条件触发的第一次dom才会被创建, echart init的时候会出现找不到dom的情况,因此无法渲染出图表。

解决办法

使用v-show来代替v-if

相关文章

  • Echarts v-if触发第二次才能引起dom变化

    背景 点击按钮,触发了某个条件后才展示图表,刚开始我是使用v-if做的显示判断,但是出现了需要点击两次才会出现图表...

  • Vue 过渡和动画

    Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。(能够触发的包括 v-if、 v-sho...

  • vue中操作this.$nextTick()

    在我们使用v-if="isShow"来操作显示dom时,触发绑定的方法导致有对象找不到的报错时,你就会需要到它了....

  • 内存泄漏处理

    全局变量 定时器和回调函数 闭包 4.dom泄漏 console.log引起的内存泄漏 5.echarts引起的内...

  • DocumentFragment

    DocumentFragment,文档片段,不是真实 DOM 树的一部分,它的变化不会触发 DOM 树的重新渲染,...

  • vue系统学习1-内部指令

    1、v-if与v-show区别 v-if: 按需加载dom,可以减轻服务器的压力。v-show:dom已加载好,调...

  • vue

    条件语句: v-if跟v-show的区别:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设...

  • [Vue] Vue学习之路

    v-if 当页面加载了Vue.js后,可以在DOM元素上加入v-if属性,用于该DOM元素的显示与隐藏 上面的代码...

  • 总结4个方面优化Vue项目

    运行时优化 1、使用v-if代替v-show 两者的区别是:v-if不渲染DOM,v-show会预渲染DOM 除以...

  • 面试之v-if v-show

    面试必问之v-if和v-show的区别是什么? v-if v-if是动态的向DOM添加或删除元素 v-if在fal...

网友评论

    本文标题:Echarts v-if触发第二次才能引起dom变化

    本文链接:https://www.haomeiwen.com/subject/dgufrktx.html