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':&nbsp;`${parseInt(100&nbsp;*&nbsp;progress)}%`}"绑定是到一个对象，所以 a;会不合适需要%在字符串内部

Answer 3

是的，可以在里面添加变量style。在你的情况下%应该在引号内。<tr&nbsp; v-for="task in tasks.data "&nbsp; v-if=" task.projet_id == key "&nbsp; &nbsp;:key="task.id">&nbsp; &nbsp; &nbsp; &nbsp;<td >{{ parseInt(100 * task.progress) }}% <div class="progress">&nbsp; &nbsp; &nbsp; &nbsp;<div class="progress-bar bg-success" role="progressbar" aria-valuenow="0" :style="&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; {'width':`${parseInt(100 * task.progress)}%`}"&nbsp; id="progress"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;aria-valuemin="`${parseInt(100 * task.progress)}`" aria-valuemax="100"></div>&nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>添加样式时不需要包含;，因为样式数据是一个对象，并且将commas像这样分隔:style="{'width':`${parseInt(100 * task.progress)}%`, color:'red'}"