vue和react 动态渲染div的宽度

最新推荐文章于 2022-11-20 00:13:10 发布
最新推荐文章于 2022-11-20 00:13:10 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： vue react web前端开发 文章标签： vue react javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ze1024/article/details/109202166
版权
本文分别探讨了在React和Vue中如何实现动态渲染div的宽度。在React中，通过map函数遍历数据来动态创建div。而在Vue中，介绍了从数据初始化、处理到渲染的步骤，并给出了相应的样式应用。最终展示了实现效果。
摘要由CSDN通过智能技术生成

react 动态渲染div的宽度

style={
   {
    "width": `${
   item.length}%` }}

例子如下

react里面使用map遍历,动态渲染
        {
   dataList && dataList.length > 0 && dataList.map((item, index) => {
   
          return <div key={
   index}>
           <div className="bgcolor" style={
   {
    "width": `${
     item.length}%` }}></div>
          </div>
        })
        }

这里附上数据结构

    this.state =
最低0.47元/天 解锁文章
ze1024
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中动态渲染组件
东方佑
04-29 12万+
https://blog.csdn.net/qq_42345237/article/details/98348889 https://www.cnblogs.com/moqiutao/p/11440315.html 自己的代码 <template> <div class="top"> <div class="top_div"> <...
【React工作记录四十二】获取页面的可视化高度和宽度
geyaoisnice的博客
02-25 1082
前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 导语 歌谣 歌谣 我们需要获取页面的一个可视化宽度和高度怎么做呢 解决思路 <div> 我是歌谣 </div> <script> // 获取展示内容宽度，去掉sider function getC..
Vue动态渲染div宽度
hql1024的博客
10-21 2889
:style="{width: item.wc_bili + '%'}"
【react踩坑】设置div宽度自适应
qq_33539213的博客
09-11 4452
场景： 使用antd组件tabs左右滑动时，有些边上的标签会只显示一半，影响页面效果。现在需要每页只显示5个tab标签，每个tab标签宽度自适应。 实现思路： 监听包裹tabs的div组件的宽度变化，动态设置每个tabs的宽度为当前外部div宽度的1/5。 方法一： const element = document.getElementsByClassName("ant-tabs-nav-scr...
JS使用Vue自定义组件实现动态多层数据渲染+递归+踩坑
砷碲 - Shendi
11-20 1143
在没有使用打包软件(WebPack，VueCli）的原生环境下使用vue自定义组件 组件名称规则 首先说一下组件名称规则，注册的组件名称用了大写的话在使用时则将大写改为 -大写的小写例如注册的名称 myEle，在使用时则
vue动态渲染svg、添加点击事件的实现
12-28
3.动态改变svg内部元素的属性和值 html标签 经多次实验，用embed、img等标签改变src属性的方式，均无法实现上述全部功能（尤其是svg内部点击事件），最终采用Vue.extend()方法完整实现，代码也较为简洁，html结构...
基于vue、react实现倒计时效果
10-16
随着前端框架技术的发展，Vue和React成为了实现现代Web应用的主流工具。本文将介绍如何使用Vue和React框架来实现倒计时效果。 ### Vue实现倒计时效果 Vue是一个构建用户界面的渐进式JavaScript框架，它允许开发者...
面试宝典 v2-新增Vue和React.pdf
09-13
3. Quirks模式与Standards模式：Quirks模式模拟老版本IE浏览器的行为，而Standards模式遵循最新的W3C标准，两者在渲染和行为上存在差异。 4. div+css布局优于table布局：div+css更灵活，可维护性更强，有利于SEO，...
vue、react面试题合集 (附答案) 中文PDF版.pdf
最新发布
06-11
根据给定文件的信息，我们可以总结出以下关于Vue和React面试题的关键知识点： ### Vue.js 相关知识点 #### 1. 动态权限绑定渲染列表（权限列表渲染） - **实现方式**：为了实现动态权限绑定渲染列表的功能，通常会...
原理深度解析Vue的响应式更新比React快
11-21
前言 我们都知道 Vue 对于响应式属性的更新，只会精确更新依赖收集的当前组件，...但是 <ChildComponent> 这个组件其实是不会重新渲染的，这是 Vue 刻意而为之的。 在以前的一段时间里，我曾经认为因为组件是一棵树，
VueGL-Vue.js组件通过three.jsReact性渲染3D图形-Vue.js开发
05-27
总结起来，VueGL是一个强大的工具，它允许开发者利用Vue.js的便利性和three.js的3D渲染能力，创造出具有沉浸感的Web应用。通过学习和掌握VueGL，你可以提升你的Vue.js项目，为用户提供更丰富、更引人入胜的视觉体验...
使用react context 实现vue插槽slot功能
01-21
首先来看下vue的slot的实现 <base-layout>组件，具名插槽name定义以及默认插槽 <div class=container> <slot name=header></slot> <slot></slot> <slot name=footer></slot> </div> 提供内容...
Vue组件通信入门之Provide和Inject机制
10-15
### Vue组件通信入门之Provide和Inject机制 #### 引言 在Vue.js中，组件间的通信至关重要，尤其当涉及到复杂的嵌套组件结构时更是如此。通常情况下，父组件可以通过子组件的`props`属性直接传递数据给子组件，但在...
详解React 的几种条件渲染以及选择
12-04
不同于Vue等其他框架提供的`v-if`或`v-show`指令，React主要依赖JavaScript的语法特性来实现条件渲染。以下将详细介绍React中的几种条件渲染方法：`if/else`、三目运算符、短路运算符，以及一些更高级的策略，如...
react-svgtocomponent将SVG转成ReactVue组件
08-15
总的来说，`react-svg-to-component`等工具为开发者提供了一种便捷的方式来整合SVG资源到React或Vue项目中，提升了代码的可维护性和SVG的复用性。通过理解其工作原理和使用方法，你可以更有效地管理项目中的矢量图形...
使用Vue实现动态数据渲染修改删除
ZhaoYulin6的博客
09-12 1554
1.建立html结构（使用Vue所以使用一个大的div来包含所有的html结构） <div id="table"> <table border="1" cellpadding="10" cellspacing="0"> <thead> <th>序号</th> <th>姓名</th> <th>性别</th> <
React监听页面尺寸，实时计算设置宽高
浦东余春娇
01-20 4889
React监听页面尺寸，实时计算设置宽高 思路 通过componentDidMount/componentWillUnmount进行监听/解除监听当前视窗的宽高 将当前的宽高进行所需的计算后赋值给state中对应的变量 页面的style中直接绑定this.state对应的宽高 举例 我需要实时设置页面中某个<div></div>的高度为视窗高度减去104px 写一个方法： setPageHeight = () => { this.setState({
Vue中的动态渲染
天生欧皇张狗蛋
07-07 2756
介入一个中间组件动态渲染，根据接口返回变量type 对应查找当前组件为什么组件如： 接口返回： data = [ { type:1,name:'分类组件'}, { type:5,name:'标签组件'}, { type:6,name:'标题组件'}, { type:2,name:'Icon组件'}, ] 页面渲染结果就为： 我是分类组件 我是标签组件 我是标题组件 我是Icon组件 <template>
第二章 react前端开发-元素渲染
qq_24430629的博客
11-11 962
本节介绍元素渲染
vue 集成 react的sdk
05-11
虽然Vue和React都是流行的前端框架，但它们具有不同的架构和设计理念，因此在同一应用程序中集成Vue和React可能会比较困难。不过，如果你需要集成React组件到Vue项目中，可以使用Vue的官方插件vue-reactivity来实现。 首先，你需要使用npm安装vue-reactivity： ``` npm install @vue/reactivity ``` 然后，你可以在Vue组件中使用Vue的响应式系统来渲染React组件。例如： ``` <template> <div> <h1>Vue Component</h1> <div ref="reactContainer"></div> </div> </template> <script> import { reactive, watchEffect } from '@vue/reactivity'; import React from 'react'; import ReactDOM from 'react-dom'; import MyReactComponent from './MyReactComponent'; export default { setup() { const state = reactive({ data: null, }); watchEffect(() => { if (state.data) { ReactDOM.render( <MyReactComponent data={state.data} />, this.$refs.reactContainer ); } }); return { state, }; }, }; </script> ``` 在这个例子中，我们使用Vue的响应式系统来管理React组件的数据。我们使用了`reactive`函数来创建一个具有响应式能力的状态对象，并在`watchEffect`函数中监听该状态对象。当该状态对象发生变化时，我们使用`ReactDOM.render`函数将React组件渲染到Vue组件的DOM元素中。 当然，这只是一个简单的例子，实际中可能会面临更复杂的问题。在集成Vue和React时，需要考虑到两个框架的生命周期、事件处理、数据传递等问题。因此，如果可能的话，最好还是保持单一框架的开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值