vue中用v-if/v-show切换echarts不显示

最新推荐文章于 2023-11-21 09:50:30 发布
最新推荐文章于 2023-11-21 09:50:30 发布
阅读量6.4k 收藏 9
点赞数 3
文章标签： vue中用v-if/v-show切换echarts不显示 v-if切换echarts不显示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web8_zhy/article/details/103088562
版权

vue中用v-if切换echarts不显示
当用v-if切换页面的时候 从第二页返回到第一页的时候,第一页的echarts图不显示
是因为切换回来的时候并没有触发生命周期函数, 所以第一页的图并不能显示
话不多说 直接上图
父组件里有echarts
子组件person里也有echarts
// 父组件
在这里插入图片描述
当子组件点击返回的时候 触发@goBack事件
// 子组件
在这里插入图片描述
在这里插入图片描述
// 父组件
在这里插入图片描述
如图,用vue的nextTick()来触发echarts事件. 图中的changeDate1就是获取echarts的方法
nextTick请自行查阅;

有的同学可能想到用v-show 但是用v-show的话,子组件的echarts图就不能显示.
再说一下: v-if和v-show的区别

v-if：当隐藏结构时该结构会直接从整个dom树中移除；(删除重构DOM)
v-show：当隐藏结构时是在该结构的style中加上display:none，结构依然保留。(改变style)

云缨·
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
10-17
例如，当使用`v-if`或`v-show`进行条件渲染，或者使用插值表达式显示动态数据时，如果不做处理，这些内容在JS执行前会短暂地显示在页面上。 为了解决这个问题，我们可以采取以下策略： 1. 隐藏待编译的元素：在...
vue2 v-model/v-text 中使用过滤器的方法示例
10-17
主要介绍了vue2 v-model/v-text 中使用过滤器的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue中v-show/v-if切换后echarts宽高问题和不显示问题
Igiveufireworks的博客
09-01 3653
在项目中发现，tab切换页面使用v-show时，echarts图表的宽高变成100px，因此改为用v-if切换。但是v-if切换后echarts图表为空白，不显示。
Vue项目, echarts因为v-if切换导致无法正常显示
Bat_Reality的博客
03-31 2133
1. [Vue+echarts] Vue项目中, 当用v-if来切换显示内容时, 发现用echarts渲染的图表无法显示, 在F12中有如下报错, 即 “dom is null” 2. 解决办法 用 v-show 替换 v-if 3. 原理 v-if是重新渲染（完全根据表达式的值在DOM中生成或移除一个元素） v-show只是简单的css切换 ...
vue2.0中使用v-if/v-show切换后echarts不显示和宽高问题
ll_883963的博客
11-21 1509
但新的问题，tab切换页面使用v-show时，echarts图表的宽高变成100px，因为v-show 本身是结构已经存在，当数据发生变化时，结构并未重新渲染，会出现 echarts 图表未获取到最外层大盒子的宽度而显示错误的情况。因为在切换后并没有触发生命周期函数，没有获取到dom结构，而无论是v-if或v-else-if或v-else，都不能和ref一起使用，而且不论是直接使用，还是在子元素上使用ref，都会获取不到真实dom元素的。所以使用v-show在什么情况都能获取真实dom。
【完美解决v-if导致echart不显示问题】
良匠的博客
07-25 4343
偶然之下发现一个骚操作，直接用this.$nextTick(()=>{})把你的加载exhart代码全部包住就行了。最后在触发v-if为true的地方再调用一次加载echart的方法loadCharts()即可。用v-if切换之后，会导致echart不显示了。试过了网上很多方法都不行。...
解决Echarts图表使用v-show,显示不全,宽度仅100px的问题
weixin_44293690的博客
05-24 1621
百度了各种资料结果都以失败告终,最后使用一下定时器就好 了只需要设置延迟一秒图表就可以正常显示。
echarts图表使用v-show控制图表显示不全的问题
lianwenxiu的博客
07-02 9270
最近做echarts图表时，因为涉及到使用开关变量控制不同图表的显示隐藏，用 v-if 时会出现没有获取到dom结构而报错，所以改用 v-show，但是 v-show 本身是结构已经存在，当数据发生变化时，结构并未重新渲染，所以会出现 echarts 图表未获取到最外层大盒子的宽度而显示一半的情况，就像下图： 还折腾了半天，其实就是当数据请求出来后，调用绘制ehcart...
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
然而，在实际开发过程中，开发者可能会遇到使用 `v-show` 或 `v-if` 控制 `el-tab-pane` 显示与隐藏时不起作用的问题。这通常是因为 `el-tab-pane` 的渲染机制导致的。 `v-show` 和 `v-if` 都是 Vue 中的条件渲染...
解决echarts图表使用v-show控制图表显示不全的问题
10-15
在实际开发中，我们可能会遇到这样一个场景：当利用`v-if`或`v-show`切换图表时，Echarts图表的渲染可能不完全，导致显示异常。 首先，`v-if`和`v-show`都是Vue中的条件渲染指令，它们都可以用来根据表达式的值决定...
vue使用v-if v-show页面闪烁,div闪现的解决方法
10-17
在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。怎么处理这样的问题呢，下面小编给大家带来了vue使用v-if v-show页面闪烁,div闪现的解决方法，一起看看吧
vue.js使用v-if实现显示与隐藏功能示例
10-18
还可以配合`v-else`和`v-else-if`来实现更复杂的逻辑判断，或者与`v-show`指令一起使用，`v-show`虽然也能实现类似的隐藏和显示功能，但它并不像`v-if`那样销毁和重建DOM元素，而是通过CSS的`display`属性来切换元素...
Vue v-on v-model v-if 语法示例演示代码
最新发布
07-17
Vue v-on v-model v-if 语法示例演示代码Vue v-on v-model v-if 语法示例演示代码Vue v-on v-model v-if 语法示例演示代码Vue v-on v-model v-if 语法示例演示代码Vue v-on v-model v-if 语法示例演示代码Vue v-on v...
对vue中v-if的常见使用方法详解
10-17
因此，对于频繁切换的条件，`v-show`可能更快，而对于初次渲染时条件为假的情况，`v-if`更优。 7. **`v-if`与`v-for`的优先级** 当`v-if`和`v-for`同时用在一个元素上时，`v-for`有更高的优先级。这意味着`v-if`将...
VUE中V-IF条件判断改变元素的样式操作
10-14
主要介绍了VUE中V-IF条件判断改变元素的样式操作，具有很好的参考价值，希望对大家有所帮助。一起跟随想过来看看吧
vue中处理echarts因v-if切换后图形显示异常+实现echarts监听窗口变化而改变大小
winne雪
11-12 3731
一、处理echarts因v-if切换后图形显示异常 有时候我们需要在一个页面中使用v-if来显示不同的两个图表。 视觉效果上好像是从一个页面点击链接跳转到另一个页面，但其实原理是通过销毁和重建两个不同dom容器来实现这个效果。 可能会出现的问题: 在切换到另一个图表显示的时候，改变了窗口宽度高度，那么点击返回按钮时看到原先的echarts图形就会有一部分消失显示不完整了。 解决办法： 我们需要在返...
vue数据更新后视图不更新解决办法
weixin_44641777的博客
09-17 825
我是在template中用了v-if=flag来控制展示，在js中数据发生改变我发现展示不对，而flag的值确实发生了改变，true和false的定义也没有错误。this.$nextTick这个方法作用是当数据被修改后使用这个方法会。更新数据后调用 this.$forceUpdate() 方法。这个方法会强制更新视图和数据，触发updated生命周期。获取更新后的dom再渲染出来，最后使用了这个方法成功了。经过我一通百度之后用了。
echarts在vue3中的使用——其他页面跳转回echarts图表页面时，不显示图表的问题
杜永康的博客
08-16 3024
简而言之，这相当于每个图表的一个唯一标识。每次图表创建时，就会生成这个东西。 也就是说，在首页加载成功时，这个东西就已经生成了，当我从其他页面跳转到首页时，这个东西还在。 所以就有了上面的警告：There is a chart instance already initialized on the dom. 那么也就是说，只要删除掉这个属性，那么每次dom都会重新挂载，在切换页面时首页就可以正常显示了。
关于uniapp结合echarts使用v-if，选项卡变更后不能显示图表的问题
weixin_45932826的博客
10-19 632
uniapp文档
echarts使用v-show
10-29
Echarts是一个优秀的数据可视化库，可以帮助开发者快速构建各种图表和数据展示的界面。在使用Echarts时，我们通常会用到v-show这个指令来控制图表的显示和隐藏。 v-show是Vue.js框架中的一个指令，用于根据表达式的值来控制DOM元素的显示和隐藏。当表达式的值为真时，DOM元素会显示出来；当表达式的值为假时，DOM元素会隐藏起来。 在使用Echarts时，可以将图表所在的DOM元素与v-show指令结合使用，通过改变表达式的值来控制图表的显示和隐藏。 例如，假设有一个按钮来控制图表的显示和隐藏，通过点击按钮可以改变一个布尔类型的变量showChart的值。通过在图表所在的DOM元素上添加v-show指令，设置表达式为showChart，就可以实现根据showChart变量的值来显示或隐藏图表。 ``` <template> <div> <button @click="toggleChart">点击切换图表显示</button> <div v-show="showChart" id="chart"></div> </div> </template> <script> export default { data() { return { showChart: true, // 其他图表相关的配置 } }, methods: { toggleChart() { this.showChart = !this.showChart; }, // 其他方法和事件处理逻辑 }, mounted() { // 初始化Echarts图表 const chart = echarts.init(document.getElementById('chart')); // 图表的相关配置和数据处理逻辑 // ... } } </script> ``` 通过上述代码，可以实现点击按钮切换图表的显示和隐藏效果。当showChart变量为真时，图表会显示出来；当showChart变量为假时，图表会隐藏起来。 总结来说，使用v-show可以方便地控制Echarts图表的显示和隐藏，提升了页面的交互性和用户体验。同时，结合Vue.js框架的特性，可以更加灵活地处理图表的显示和隐藏逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值