Vue.js字符串格式无法正常工作

Question

我正在尝试在VueJs中动态设置div样式，但是面对这个问题， this.currentProgressLevel 不适用于currentStyle对象内部的width属性。正在使用。当我使用* $ {this.currentProgressLevel 75} px 时，width属性不起作用为什么当我更改 this.currentProgressLevel < / strong>手动设置为0.33 ，但随后将被硬编码，为什么不从数据变量currentProgressLevel中获取值？下面是我正在使用的代码：

在脚本中：

data(){
return{
currentProgressLevel:.33,
currentStyle:{
width: ${this.currentProgressLevel *75}px ,
height:‘6px’,
background:‘green’
}
}}

Answer 1

您应像这样将currentStyle变成computed：

computed: {
  currentStyle () {
    return {
      width: `${this.currentProgressLevel *75}px`,
      height:‘6px’,
      background:‘green’
    }
  }
}

Answer 2

对于反应数据，应将“ currentStyle”移至计算值。在这种情况下，您只需捕获“ currentProgressLevel”的初始值即可。

computed:{
  currentStyle(){
    return {
      width: ${this.currentProgressLevel *75}px ,
      height:‘6px’,
      background:‘green’
    }
  }
}