Javascript Vue.js动态<；风格>+；变量

我想将一个动态变量传递到样式中，这可能吗？我试过这种方法，但没有成功：

:style="{'width':`${parseInt(100 * task.progress)}`% ;}"

这是我的任务。vue：

{{parseInt（100*task.progress）}}%

除了一些语法错误外，它看起来还行：

：style=“{'width'：`${parseInt（100*进度）}%`}”

• 绑定到一个对象，所以一个

  将不合适

• %

  需要在字符串中

---

是可以在

样式中添加变量。在您的情况下，
%
应该在引号内

<tr  v-for="task in tasks.data "  v-if=" task.projet_id == key "   :key="task.id">
       <td >{{ parseInt(100 * task.progress) }}% <div class="progress">
       <div class="progress-bar bg-success" role="progressbar" aria-valuenow="0" :style=" 
        {'width':`${parseInt(100 * task.progress)}%`}"  id="progress" 
       aria-valuemin="`${parseInt(100 * task.progress)}`" aria-valuemax="100"></div>
       </div>             
</td>

为了满足您的需求，我为您链接了一个演示

让我们看得更深一点
我们可以看看您的
v-bind
语法

<div class="progress-bar bg-success" role="progressbar" aria-valuenow="0" :style=" 
        {'width':`${parseInt(100 * task.progress)}`% ;}"  id="progress" 
       aria-valuemin="`${parseInt(100 * task.progress)}`" aria-valuemax="100"></div>
       </div>     

我们可以看到，您正在使用key
width
创建一个
对象
，who's value是另一个
表达式

{'width':`${parseInt(100 * task.progress)}`% ;}

`${parseInt(100 * task.progress)}`%

这里我们看到了，一个香草javascript的特性的使用

模板文本用反勾（``）括起来

模板文本可以包含占位符

[占位符]由美元符号和大括号（${expression}）表示

当javascript看到这种语法时，将计算
表达式
，这就是我们发现第一个语法错误的地方

//In
`${parseInt(100 * task.progress)}`%

//The expression is "parseInt(100 * task.progress)"
//simplifying we get
`${expression}`%

//and we know that `${expression}` is a string

现在可能更容易看出这一点

"string"%

没有联会的意义。
解决方案是什么？将
%
放在
模板文本中

`${parseInt(100 * task.progress)}%`

很简单

向上移动
{'width'：`${parseInt（100*task.progress）}`%；}

可以改为

{'width'：`${parseInt（100*task.progress）}%`；}

但是
不属于
对象
。例如，
{'attr'：'1'；}
无效。这就给我们留下了

{'width'：`${parseInt（100*task.progress）}%`}

鳍
作为对读者的挑战，这相当于

:style="{'width':parseInt(100 * task.progress)}+'%'}"

提供的链接应该足以帮助理解

TLDR：您有语法错误<代码>：style=“{'width'：`${parseInt（100*task.progress）}%`}”
有效

"string"%

`${parseInt(100 * task.progress)}%`

:style="{'width':parseInt(100 * task.progress)}+'%'}"