Question

Vuejs 字符串格式无法正常工作

2020-11-07

1289

vue.js vuejs2 electron vue-component vuex

嗨，我正在尝试在 VueJs 中动态设置 div 的样式。但面临这样一个问题： this.currentProgressLevel 未应用于 currentStyle 对象内的 width 属性。我附上了我正在使用的代码的屏幕截图。当我使用 ${this.currentProgressLevel *75}px 时，width 属性不起作用。为什么它可能不起作用？当我手动将 this.currentProgressLevel 更改为 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’
    }
  }
}