component-动态控制 div width 的值 根据传入的变量决定width的值 vue

1.实现

根据参数的值，div显示不同的长度

 <div class="node-line" :style="lineProgress"></div>

<script>export default {name: "trainSummaryInfo",data(){return{linePercentage:200,}},computed:{lineProgress(){const style = {}style.width = this.linePercentage +'px';return style}}}
</script>

<style >.node-line{position: absolute;width: 60px;height: 10px;left:20%;}
</style>

style里面定义变量，在计算属性里面，用变量控制width的值

循环根据数组长度定义div宽度

<table style="background-color: aqua;"><tbody><!-- 宽度动态计算根据时间跨度长短 --><tr v-for="(bodyData, index) in bodyData" :key="index" :style="lineProgress" class="bodyDay"><!-- 单元格的宽度通过任务时间长短来进行计算 --><!-- 宽度偏移量按照当前任务开始日期*宽度 --><!-- 拖动在tr内进行拖动 --><!-- :style="{  width:bodyData.days.length * 60 +'px'}" --><div :style="{  width:bodyData.days.length * 60 +'px'}" class="bodyDayItemDemo">12</div></tr></tbody>
</table>

            // 表体数据bodyData: [{days: ['15', '16', ],},{days: ['15', '15', '15'],},{days: ['16', '17'],},],

2.原文出自

动态控制 div width 的值 根据传入的变量决定width的值 vue_width="300"变量控制-CSDN博客