我想將動態變量傳遞給樣式，這可能嗎？我嘗試了這種方法，但沒有成功：: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>
3 回答
絕地無雙
TA貢獻1946條經驗 獲得超4個贊
肯定有一種方法可以滿足您的需求，我為您鏈接了一個演示。
讓我們看得更深入
我們可以看一下你的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)}%`}"作品
慕斯709654
TA貢獻1840條經驗 獲得超5個贊
除了一些語法錯誤之外，它看起來不錯：
:style="{'width': `${parseInt(100 * progress)}%`}"綁定是到一個對象，所以 a
;會不合適需要
%在字符串內部
搖曳的薔薇
TA貢獻1793條經驗 獲得超6個贊
是的，可以在里面添加變量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'}"
- 3 回答
- 0 關注
- 218 瀏覽
添加回答
舉報
0/150
提交
取消