iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >Component里的条件渲染机制怎么使用
  • 271
分享到

Component里的条件渲染机制怎么使用

2023-06-04 02:06:21 271人浏览 八月长安
摘要

这篇文章主要讲解了“Component里的条件渲染机制怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Component里的条件渲染机制怎么使用”吧!SAP UI5 WEB Compo

这篇文章主要讲解了“Component里的条件渲染机制怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Component里的条件渲染机制怎么使用”吧!

SAP UI5 WEB Component同时定义了两个图表标签,即BarChart和LineChart:

Component里的条件渲染机制怎么使用

运行时效果如下:

Component里的条件渲染机制怎么使用

现在我想针对这两个图表控件做一个条件显示,即点击屏幕一次,显示A图表,再点击,显示B图表。

(1) 引入useState函数:

Component里的条件渲染机制怎么使用

使用该useState生成一组控制器,返回的值通过toggerCharts和setToggerCharts保存。

Component里的条件渲染机制怎么使用

前者是一个数组,值为默认显示的图表类型:lineChart,后者是一个函数。

Component里的条件渲染机制怎么使用

在handleHeaderClick这个事件响应函数里,根据点击更改图表类型。

(2) 在card正文里,通过类似Java的三元表达式的语法来控制图表的显示:

Component里的条件渲染机制怎么使用

最后效果如下:

Component里的条件渲染机制怎么使用Component里的条件渲染机制怎么使用

感谢各位的阅读,以上就是“Component里的条件渲染机制怎么使用”的内容了,经过本文的学习后,相信大家对Component里的条件渲染机制怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

--结束END--

本文标题: Component里的条件渲染机制怎么使用

本文链接: https://www.lsjlt.com/news/236244.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Component里的条件渲染机制怎么使用
    这篇文章主要讲解了“Component里的条件渲染机制怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Component里的条件渲染机制怎么使用”吧!SAP UI5 web Compo...
    99+
    2023-06-04
  • React条件渲染如何使用
    这篇文章主要介绍“React条件渲染如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“React条件渲染如何使用”文章能帮助大家解决问题。我们先创建一个用于演示条件渲染的组件import&nbs...
    99+
    2023-07-04
  • Vue怎么实现条件渲染与列表渲染
    本文小编为大家详细介绍“Vue怎么实现条件渲染与列表渲染”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue怎么实现条件渲染与列表渲染”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、Vue条件渲染v-show...
    99+
    2023-06-30
  • Flex渲染机制中外部Flex渲染器怎么用
    这篇文章主要为大家展示了“Flex渲染机制中外部Flex渲染器怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Flex渲染机制中外部Flex渲染器怎么用”这篇文章吧。Flex渲染机制之外部F...
    99+
    2023-06-17
  • vue3怎么使用defineAsyncComponent与component标签实现动态渲染组件
    本文小编为大家详细介绍“vue3怎么使用defineAsyncComponent与component标签实现动态渲染组件”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue3怎么使用defineAsyncComponent与compone...
    99+
    2023-07-05
  • React中怎么实现条件渲染
    今天就跟大家聊聊有关React中怎么实现条件渲染,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。1. if-else我们可以将 if-else 条件逻...
    99+
    2024-04-02
  • React条件渲染实例讲解使用
    我们先创建一个用于演示条件渲染的组件 import './App.css'; import React from "react"; class App extends React.C...
    99+
    2022-11-13
    React条件渲染 React渲染机制
  • react条件渲染指的是什么
    这篇文章主要介绍“react条件渲染指的是什么”,在日常操作中,相信很多人在react条件渲染指的是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”react条件渲染指的是...
    99+
    2024-04-02
  • 小程序的条件渲染怎么实现
    这篇文章主要介绍“小程序的条件渲染怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“小程序的条件渲染怎么实现”文章能帮助大家解决问题。1.wx:if实现条件渲染在框架中,使用 wx:if=&qu...
    99+
    2023-07-04
  • 怎么在React条件渲染中使用三元表达式
    本篇内容介绍了“怎么在React条件渲染中使用三元表达式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!三元...
    99+
    2024-04-02
  • 微信小程序WXML条件渲染怎么用
    本文小编为大家详细介绍“微信小程序WXML条件渲染怎么用”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序WXML条件渲染怎么用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。需求按照位置闹铃程序的设计,当...
    99+
    2023-06-19
  • vue3如何使用defineAsyncComponent与component标签实现动态渲染组件
    本篇内容介绍了“vue3如何使用defineAsyncComponent与component标签实现动态渲染组件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅...
    99+
    2023-07-06
  • 微信小程序条件渲染怎么判断
    本文小编为大家详细介绍“微信小程序条件渲染怎么判断”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序条件渲染怎么判断”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。wx:if在框架中,我们用wx:if=&q...
    99+
    2023-06-26
  • Vue.js条件渲染、列表渲染及Vue中key值的内部原理是什么
    这篇文章主要介绍“Vue.js条件渲染、列表渲染及Vue中key值的内部原理是什么”,在日常操作中,相信很多人在Vue.js条件渲染、列表渲染及Vue中key值的内部原理是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希...
    99+
    2023-07-06
  • vue3 使用defineAsyncComponent与component标签实现动态渲染组件思路详解
    目录业务场景简述:一、基础的动态引入组件:二、复杂的引入:不确定到底引入什么组件,组件的路径由后端返回内容有些啰嗦,内容记载了当时遇到了bug以及解决问题的思路。 业务场景简述: 前...
    99+
    2023-03-02
    vue3 动态渲染组件 vue3 使用defineAsyncComponent与component标签
  • 怎么使用React虚拟渲染实现多个图表渲染
    今天小编给大家分享一下怎么使用React虚拟渲染实现多个图表渲染的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。需求每行渲染3...
    99+
    2023-07-02
  • vue-cli3.0怎么使用prerender-spa-plugin插件预渲染
    这篇文章主要介绍“vue-cli3.0怎么使用prerender-spa-plugin插件预渲染”,在日常操作中,相信很多人在vue-cli3.0怎么使用prerender-spa-plugin插件预渲染问题上存在疑惑,小编查阅了各式资料,...
    99+
    2023-06-30
  • JTable渲染器怎么在Java中使用
    JTable渲染器怎么在Java中使用?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。JButtonTableExample.javapackage a...
    99+
    2023-05-30
    java jtable
  • 怎么使用Key对Vue组件进行重新渲染
    这篇文章主要介绍“怎么使用Key对Vue组件进行重新渲染”,在日常操作中,相信很多人在怎么使用Key对Vue组件进行重新渲染问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么...
    99+
    2024-04-02
  • Vue的列表渲染指令v-for怎么使用
    这篇文章主要介绍“Vue的列表渲染指令v-for怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue的列表渲染指令v-for怎么使用”文章能帮助大家解决问题。Vue的列表渲染1.1.v-fo...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作