vue中语音长度随语音秒数而动态变化(动态设置div的样式)

功能需求：语音长度随语音秒数的长度而变化，需要动态设置div的宽度，这里用到 v-bind:style

v-bind:style的使用规则如下：

通过v-bind:style动态设置div的样式，简写为 :style

    <div :style="{width: widthPercent+'%'}">
    ...
    </div>

使用computed计算属性， 计算宽度，当语音时长较小时，设置最小宽度，当语音时长较大时，设置最大宽度，在这期间的则正常计算显示。

 computed: {
    // 语音长度随语音秒数变化
    widthPercent() {
      // 语音小于10秒 都返回最小长度15%
      if (this.audio.maxTime < 2) {
        return 3
      }
      if (this.audio.maxTime > 30) {
        return 45
      }
      return this.audio.maxTime / 60 * 100
    }
  }

ok！ 完成效果