(小程序)按钮切换对应展示区域

news2024/11/15 18:37:02

(小程序)按钮切换对应展示区域

需求:点击按钮切换表格和图表两种展示方式


在这里插入图片描述


html

<u-button type="primary" size="mini" text="图表" v-if="form.curType === 'table'"
	@click="showEcharts"></u-button>
<u-button type="primary" size="mini" text="表格" v-if="form.curType === 'echarts'"
	@click="showTable"></u-button>

js

const form = ref({ 
	curType: "table", // echarts 
});
// 切换结果
const showTable = () => {
	form.value.curType = "table";
};
const showEcharts = () => {
	form.value.curType = "echarts";
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/710390.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

同一个分支maven构建出来的包不一样?

现象 最近发布spring boot项目时遇到了一个奇怪的问题&#xff0c;日志异常信息如下&#xff1a; Caused by: java.lang.IllegalArgumentException: LoggerFactory is not a Logback LoggerContext but Logback is on the classpath. Either remove Logback or the competing …

Image Watch 的使用

目录 1、下载地址 2、安装完成 3、调试 1、下载地址 Image Watch - Visual Studio Marketplace 2、安装完成 打开VS&#xff0c;在项目->其他窗口中有image watch选项 3、调试 一直放大图像可以查看详细的色彩值&#xff0c;通道数为3

各省绿色创新效率原始数据+测算(2020-2021)

采用了考虑非期望产出的超效率SBM模型来测量中国各省的绿色创新效率。该数据包括原始数据测算结果&#xff0c;包括人力资本、资本、能源投入&#xff0c;以及技术、经济、生态效益等多个维度的数据。可以帮助研究人员了解中国各省的绿色创新效率情况&#xff0c;揭示不同省份在…

搜索引擎概念解析

搜索引擎概念解析 什么是搜索引擎 MySQL搜索引擎举例 搜索引擎是一种用于在互联网上搜索并呈现相关信息的工具。它通过自动扫描和索引大量网页内容&#xff0c;并根据用户提供的关键词或查询条件&#xff0c;返回与之相关的网页链接和摘要。 当用户在搜索引擎中输入关键词或…

系列二、RocketMQ基本概念 系统架构

一、基本概念 1.1、消息&#xff08;Message&#xff09; 消息是指&#xff0c;消息系统所传输信息的物理载体&#xff0c;生产和消费数据的最小单位&#xff0c;每条消息必须输入一个主题。 1.2、主题&#xff08;Topic&#xff09; Topic表示一类消息的集合&#xff0c;每个…

筑牢三大新型能源基础设施,能源变革的分水岭和路线图

当下面临百年未有之大变局&#xff0c;创新科技密集发生&#xff0c;面对瞬息万变的世界&#xff0c;寻找到一条通往未来的确定性道路&#xff0c;绝对是行稳致远的前置条件。 “双碳战略”持续推进&#xff0c;距离2030“碳达峰”越来越近&#xff0c;能源产业变革的重要性和迫…

【SpringMVC 学习笔记】

SpringMVC 笔记记录 1. SpringMVC 简介2. 入门案例3. 基本配置3.1 xml形式配置3.2 注解形式配置 4. 请求4.1 请求参数4.1.1 普通类型传参4.1.2 实体类类型传参4.1.3 数组和集合类型传参 4.2 类型转换器4.3 请求映射 5. 响应 1. SpringMVC 简介 三层架构 2. 入门案例 3. 基本…

如何建立自己的知识体系?202209

知识太多了&#xff0c;无法全部快速吸收进大脑&#xff0c;需要通过特定的方法、技能&#xff0c;在面对大量知识的情况下&#xff0c;快速梳理&#xff0c;构建自己的知识体系。 学习的目标&#xff0c;不仅仅是记忆知识&#xff0c;而是搜索知识、并过滤、洞察、理解、使用…

Spring Boot 整合视图层技术 Thymeleaf

大家好&#xff01;我是今越。简单记录一下在 Spring Boot 框架中如何整合 Thymeleaf 及使用。 Thymeleaf 简介 Thymeleaf 是新一代 Java 模板引擎&#xff0c;它类似于 Velocity、FreeMarker 等传统 Java 模板引擎&#xff0c;但是与传统 Java 模板引擎不同的是&#xff0c;T…

爆肝整理,App测试小技巧,全覆盖功能到性能测试...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 app测试是使用手动…

ES查询[全网最全免费送付费内容]

ES查询 相关度搜索&#xff0c;需要计算评分 _score 相关度评分用于对搜索结果排序&#xff0c;评分越高则认为其结果和搜索的预期值相关度越高&#xff0c;即越符合搜索预期值。在7.x之前相关度评分默认使用TF/IDF算法计算而来&#xff0c;7.x之后默认为BM25。 源数据&…

Win 10 重装系统(PE方式)

前言&#xff1a; 最近这个笔记本&#xff08;ThinkPad E480&#xff0c;使用了四年左右&#xff09;用起来很卡&#xff0c;经常开机状态时&#xff0c;合上之后&#xff0c;再打开屏幕就卡死了&#xff0c;鼠标和键盘按了都没有反应&#xff0c;无奈之下只能强制按电源关机后…

SpringCloud——Nacos下载

文章目录 nacos简介nacos下载nacos的启动访问nacos nacos简介 Nacos&#xff08;全称为 “Naming and Configuration Service”&#xff09;是阿里巴巴开源的一个用于实现动态服务发现、服务配置和服务元数据管理的项目。它是一个分布式系统的服务基础设施&#xff0c;为云原生…

turtle画春联

import turtle #右边春联 turtle.penup() turtle.goto(100,150) turtle.pendown() turtle.color(red,red) turtle.begin_fill() turtle.forward(50) turtle.right(90) turtle.forward(400) turtle.right(90) turtle.forward(50) turtle.right(90) turtle.forward(400) turtle.e…

【大数据Hive】Hive 窗口函数使用详解

目录 一、前言 二、hive 窗口函数概述 2.1 聚合函数与窗口函数差别 2.1.1 创建一张表 2.1.2 加载数据到表中 2.1.3 sumgroup by普通常规聚合操作 2.1.4 sum窗口函数聚合操作 三、窗口函数 3.1 窗口函数语法 3.2 参数说明 3.2.1 Function(arg1,..., argn) 3.2.2 OV…

ElasticSearch 索引设计

ElasticSearch 索引设计 在MySQL中数据库设计非常重要&#xff0c;同样在ES中数据库设计也是非常重要的 概述 创建索引就像创建表结构一样&#xff0c;必须非常慎重的&#xff0c;索引如果创建不好后面会出现各种各样的问题 索引设计的重要性 索引创建后&#xff0c;索引的分片…

找工作第二弹——挑战CSS重难点一篇就够

目录 前言CSS知识点篇1. 选择器2. CSS三大特性三大特性计算权重 3. 显示模式显示模式转化 4. 解决高度塌陷问题5. 浮动浮动介绍为什么要清除浮动-解决高度塌陷问题清除浮动额外标签法&#xff08;W3C推荐做法&#xff09;给父亲添加overflow伪元素法双伪元素 6. BFC7. 定位子绝…

辉哥带你学hive第八讲

1.自定义函数 1.1 自定义函数类型 根据用户自定义函数类别分为以下三种&#xff1a; &#xff08;1&#xff09;UDF&#xff08;User-Defined-Function&#xff09; 一进一出。 &#xff08;2&#xff09;UDAF&#xff08;User-Defined Aggregation Function&#xff09; 用户…

【二叉树part08】| 235.二叉搜索树的最近公共祖先、701.二叉搜索树中的插入操作、450.删除二叉搜索树中的节点

目录 &#x1f388;LeetCode235.二叉搜索树的最近公共祖先 &#x1f388;LeetCode701.二叉搜索树中的插入操作 &#x1f388;LeetCode450.删除二叉搜索树中的节点 &#x1f388;LeetCode235.二叉搜索树的最近公共祖先 链接&#xff1a;235.二叉搜索树的最近公共祖先 给定一个…

Maven(三)如何使用命令导出所有的组件和版本信息

命令如下&#xff1a; mvn dependency:tree | grep ":jar" | sed s/ //g | sed s/-//g | sed s/\\-//g | sed s/|//g | awk !x[$0]注意&#xff1a;以上命令需要在 Git Bash 中执行。 执行结果&#xff1a; 整理完毕&#xff0c;完结撒花~ &#x1f33b;