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

本文探讨了Vue中使用v-if切换页面时ECharts图表不显示的问题,解析了v-if与v-show的区别,以及如何利用Vue的nextTick解决ECharts图表在页面切换后无法重新渲染的难题。

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)

主题任务二:智能仪表盘 项目概述: 创建一个模拟的数据可视化仪表盘,展示统计数据、用户信息和任务列表,支持数据筛选和状态更新。 知识点覆盖与实现要求: 1.VUE3 项目创建流程 要求:使用 Vite 创建名为smart-dashboard的新项目,完成基础配置并运行。 2.Vue.js 开发基础 数据绑定:在Dashboard.vue中定义userInfo(用户信息)、stats(统计数据)、tasks(任务列表)等响应式数据。 内容渲染:用v-text显示用户名、统计数值;用{{ }}展示任务标题。 条件渲染:用v-if/v-else-if根据任务status(未开始 / 进行中 / 已完成)显示同状态标签;用v-show控制 “数据筛选面板” 的显示。 列表渲染:用v-for遍历stats数组渲染统计卡片;遍历tasks数组渲染任务列表,结合:key确保唯一性。 3.Vue 组件的使用1 父向子传参: Dashboard.vue向StatCard.vue传递单个统计项(:data="stat",包含title、value、icon)。 Dashboard.vue向TaskList.vue传递任务列表(:tasks="filteredTasks")和筛选条件(:filter="statusFilter")。 子向父传参: TaskItem.vue的状态切换按钮点击时,通过$emit('update-status', task.id, newStatus)通知父组件更新任务状态。 FilterPanel.vue的筛选条件变化时,通过$emit('change-filter', value)传递新的筛选值。 跨级组件通信: 在Dashboard.vue中用provide('userInfo', userInfo)提供用户信息。 在Header.vue(嵌套在Layout.vue中)用inject('userInfo')接收并显示用户名。 引用组件:在Dashboard.vue中组合StatCard.vue、TaskList.vue、FilterPanel.vue等组件。 4.Vue 组件的使用2 动态组件: 创建ChartBar.vue(柱状图)、ChartPie.vue(饼图)组件。 在Dashboard.vue中用下拉菜单切换activeChart值,通过<component :is="activeChart" />动态渲染图表。 生命周期函数: Dashboard.vue中用onMounted模拟加载初始数据;ChartBar.vue中用onUpdated在数据变化时重新绘制图表。 插槽的使用: 创建Widget.vue组件,含#header(标题)和默认插槽(内容),统一仪表盘组件布局。 StatCard.vue和TaskList.vue均使用Widget.vue包裹,通过插槽传入内容。 自定义指令: 注册v-tooltip指令,实现鼠标悬停时显示提示文本(如统计数据的说明)。 在StatCard.vue的数值上应用v-tooltip="'近7天数据'"。
09-27
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值