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

 进度条组件，根据参数的值，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的值