echarts图表 使用v-if 和v-show 爬坑之旅 v-if触发第二次才能触发dom变化

最新推荐文章于 2022-09-08 17:29:50 发布
最新推荐文章于 2022-09-08 17:29:50 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： js 文章标签： vue v-if
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiubai_9000/article/details/103028165
版权

需求是这样子的 页面一开始渲染时没有 chart这个元素 在触发了某个条件之后才有  控制元素的显隐 我第一反应 v-if 写上去了 

然后发现 我点击触发条件第二次才能有表格出来 是什么问题呢 

原来我第一次点的时候 dom才创建出来 echart里面的 init 是没有找到我的dom的 第二次才找到

所以用show 就哦了

深刻体会到 v-if和v-show的区别

jiubai_9000
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决echarts图表使用v-show控制图表显示不全的问题
10-15
主要介绍了解决echarts图表使用v-show控制图表显示不全的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue v-if在ios下 click需要两次触发的bug
qq_37172634的博客
10-11 1948
解决vue v-if在ios下 click需要两次触发的bugbug猜想踩坑解决 bug vue绑定了click事件，但是在ios手机上需要点击两次才能触发事件 猜想 ios不允许div绑定点击 vue事件绑定对于ios这个版本的不兼容 ios处理点击时有其他的操作 踩坑 给div改成btn也是不好使的。。。。 验证失败 找了几台不同ios版本的都存在这个问题，可以先排除这个猜想。 ...
echarts切换tab时，第一个图表显示，第二个图表不显示的解决办法
热门推荐
AinUser的博客
05-12 1万+
首先这种情况，我在网上看到了好多人问，确实也有正解，但是只是说出了其错误出现的原因，并没有给出解决方法。 我也是深受其害，所以呢，在这里记录一下，分享给还在困扰着的你们，迅速找出解决办法。 首先，我先简单介绍一下，我这里出现错误的情境。 原来刚刚遇到这个问题的时候，是在点击多个tab选项之后，出现了地图不显示的情况，然后呢，我就一直在根据打开多个tab之后，地图不显示这个思路进行寻找bu
v-if和v-show的真实的区别，来解决echarts图表tab切换
柠檬不萌只是酸i
07-15 1546
之前使用vue的时候，忽略了这个细节，知道今天在vue中使用图表的时候，才发现出问题了。 问题描述：写的图表在页面上全部展示的时候可以显示，但是变成tab切换的时候，页面上的图表渲染不出来。 先来说下v-if和v-show的区别： v-if : 当隐藏结构时，该结构会直接从整个DOM树中移除。 v-show : 当隐藏结构时，是在该结构的style中加上display : none ...
echarts使用v-if v-show报错,找不到dom以及被挤成一团的bug
qq_16828495的博客
04-30 1130
谈一谈当想隐藏切换一个echarts图,会报错 我们一般加载echarts图时写的代码位置 mounted() { setTimeout(() => { this.drawLine(); }, 1500); }, 页面加载时如果if判断为隐藏时echarts图插入找不到dom如果改成v-show会被挤成一团 建议在切换事件时来加载这个echarts //判断加载那个图 switchBtn(e) { this.btnText = e; i
富文本使用v-if重新加载dom问题
weixin_45797900的博客
05-19 561
之前在开发中遇到一个问题，就是要动态生成wangEditor富文本编辑器。 然后结构是有tab标签切换的，当时标签的是v-if来判断显示。导致页面报错，找不到dom元素生成富文本标签。 后面才发现用的是v-if重新加载dom元素导致找不到id生成富文本，后面改成v-show就解决问题了。 错误的： <div v-if="show"> <el-form-item label="文本文案："> // 生成富文本的div <div id="Ed
vue-cli和v-charts实现可视化图表过程解析
01-19
v-charts是饿了么团队开源的一款基于Vue和Echarts的图表工具，在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 ...
适合uni-app 使用的echarts图表组件，开箱即用！
09-23
适合uni-app 使用的echarts图表组件，开箱即用！
v-charts-基于Vue2.x和Echarts的图表组件。-Vue.js开发
05-27
基于Vue2.x和Echarts的图表组件功能统一的数据格式：使用统一的数据格式v图表。 样本项目| 英文| 基于Vue2.x和Echarts的图表组件具有统一的数据格式：使用统一的数据格式，既方便了前端和后端，又易于创建和编辑。 ...
Vue知识整理，让你快速入门Vue.js：03_7.本地应用：v-if指令（条件判断-显示状态-操作dom元素）
鲁迷那的专栏—坚持实践后再写出来！
03-22 1191
目录 一、指令v-if的语法介绍 二、指令 v-if 代码验证测试 1、实例代码 2、效果展示 三、代码演示 v-show 和 v-if 的区别 1、实例代码 2、效果展示 四、内容-总结 上一节我们学习了v-show指令，一个通过操作display来切换元素显示状态的指令，但是在View中我们并不仅仅就这一个指令来操作元素的显示状态，这一节我们将来学习另外一个类似的指令v-if......
解决二charts图例需要点击两次才生效的问题
weixin_47058581的博客
09-08 630
解决二charts图例需要点击两次才生效的问题
解决Echarts使用tab切换时只显示第一个tab中图表，其他tab中图表不显示或显示不全问题
meilidebabi的博客
12-03 1323
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 首先我是参考这个链接： https://blog.csdn.net/nongweiyilady/article/detail
vue项目中tab切换展示不同的echarts图表，切换后图表不显示，为空白，解决方案，为每个echarts id的div设置宽高即可
binbin_youyou的博客
08-04 3027
vue项目中tab切换展示不同的echarts图表，切换后图表不显示，为空白，解决方案，为每个echarts id的div设置宽高即可
子组件使用v-for后使用v-show控制显示隐藏时绑定的值发生变化 页面没有渲染
xiaoboxiaoxing的博客
10-11 572
如题子组件使用v-for后使用v-show控制显示隐藏时绑定的值发生变化 页面没有渲染 代码如下v-for="item in formItems" v-show="'show' in item ? item.show : true" 此时item.show发生变化但是页面并没有跟着进行显示隐藏 需要重复点击两次才会发生变化 解决办法 在父组件改变item.show的数据的时候 使用this.$set进行赋值 代码如下 this.$set(this.formItems[4], 'show', false)
调接口渲染的时候 v-if第一次没问题第二次渲染走watch ,数据长度已经存在导致走watch
csstmg的博客
11-19 340
组件渲染的时候 当获取新数据以后 会走组件的mounted–不会走watch 当有数据存在的时候–会走watch 清空数据–让v-if重新渲染 $set 数组 data:{ arr1 = ['a','b', 'c'] arr2 = ['f,''g','h'] vm.$set(vm.arr2,1,'al') } es5 const arr1 = [1,2,3,4,5], arr2 = [5,6,7,8,9]; // 交集 let intersection = a..
在vue3环境下用echarts绘制图形在线上环境中路由切换后echarts图不出现以及tab切换时echarts图
qq_45641978的博客
07-29 2467
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
Vue 项目使用 ECharts 切换页面回来图表不显示
weixin_49809163的博客
04-11 6457
在 Vue 项目中使用 ECharts 时，一开始图表能渲染出来，当切换到其他页面再回来的时候，图表就不显示了
记录一下vue切换tab页面，Echarts图表不显示的问题
weixin_45426519的博客
01-04 3252
项目场景： 最近学习Vue遇到了一个坑，在点击tab标签切换页面时，echarts会在下一次切换不能显示出来，而且后台数据可以正常传到此页面中 问题描述： <!-- 这是我的标签 --> <el-main style="padding: 0px;"> <el-tabs v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab" @tab-click="clickTab"&
echarts使用v-show
最新发布
10-29
在使用Echarts时，可以将图表所在的DOM元素与v-show指令结合使用，通过改变表达式的值来控制图表的显示和隐藏。 例如，假设有一个按钮来控制图表的显示和隐藏，通过点击按钮可以改变一个布尔类型的变量showChart的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值