Vue.js 动态 <style> + 变量

Question

我想将动态变量传递给样式，这可能吗？我尝试了这种方法，但没有成功：:style="{'width':`${parseInt(100 * task.progress)}`% ;}"这是我的task.vue： <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>

Answer 1

肯定有一种方法可以满足您的需求，我为您链接了一个演示。

让我们看得更深入

我们可以看一下你的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>     

我会稍微简化一下

<div 

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

</div>

在这里我可以看到你已经绑定 style了expression

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

我们可以看到您正在创建一个Object带有键的值width，而谁的值是另一个expression

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

在这里我们看到了模板文字的使用，这是普通 JavaScript 的一个功能。

模板文字用反引号 (` `) 括起来

模板文字可以包含占位符

[占位符] 由美元符号和大括号表示 (${表达式})

当 javascript 看到 this 语法时，就会对 theexpression进行求值，这就是我们发现第一个语法错误的地方

//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"%

没有语法意义。解决方案？把% 里面的template literal

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

足够简单

向后移动

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

可以改为

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

但;不属于object. 例如，{'attr':'1';}无效。这给我们留下了

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

结尾

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

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

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

TLDR：您有一个语法错误；:style="{'width':`${parseInt(100 * task.progress)}%`}"作品

Answer 2

除了一些语法错误之外，它看起来不错：

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

• 绑定是到一个对象，所以 a;会不合适

• 需要%在字符串内部

Answer 3

是的，可以在里面添加变量style。在你的情况下%应该在引号内。

<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>

添加样式时不需要包含;，因为样式数据是一个对象，并且将commas像这样分隔

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