vue和react 动态渲染div的宽度

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 = { viewTopics: [ { name: '数据1', number: '100', length: 100 }, { name: '数据2', number: '90', length: 90 }, { name: '数据3', number: '50', length: 50 }, { name: '数据4', number: '40', length: 40 }, { name: '数据5', number: '50', length: 50 } ],

vue 动态渲染div的宽度

:style="{width: item.length + '%'}"

例子如下

1、初始化数据

viewTopics: [{ name: '面包', number: '100', index: 1, }, { name: '包子', number: '90', index: 2, }, { name: '馒头', number: '80', }, { name: '窝头', number: '50', }, { name: '大饼', number: '30', } ],

2、处理数据

let that = this that.denominator = this.viewTopics[0].number || '' console.log('11111', that.denominator) let res = that.viewTopics.map((item, index) => { return { name: item.name, number: item.number, index: item.index, length: (item.number / that.denominator) * 100 } }); that.data = res console.log(that.data, 111)

3、渲染数据

<div class="aa" v-for="(item,index) in data" :key="index"> <div style="display: flex;"> <div>{{item.name}}</div> <div>{{item.number}}</div> </div> <div class="bg" :style="{width: item.length + '%'}"></div>

样式

.aa { width: 200px; } .bg { height: 20px; background: #000; }

最后效果如下图