我想將動(dòng)態(tài)變量傳遞給樣式，這可能嗎？我嘗試了這種方法，但沒有成功：: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 回答
絕地?zé)o雙
TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超4個(gè)贊
肯定有一種方法可以滿足您的需求，我為您鏈接了一個(gè)演示。
讓我們看得更深入
我們可以看一下你的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>? ? ?
我會(huì)稍微簡化一下
<div?
? ? :style="{'width':`${parseInt(100 * task.progress)}`% ;}">
</div>
在這里我可以看到你已經(jīng)綁定?style了expression
{'width':`${parseInt(100?*?task.progress)}`%?;}我們可以看到您正在創(chuàng)建一個(gè)Object帶有鍵的值width，而誰的值是另一個(gè)expression
`${parseInt(100?*?task.progress)}`%在這里我們看到了模板文字的使用，這是普通 JavaScript 的一個(gè)功能。
模板文字用反引號(hào) (` `) 括起來
模板文字可以包含占位符
[占位符] 由美元符號(hào)和大括號(hào)表示 (${表達(dá)式})
當(dāng) javascript 看到 this 語法時(shí)，就會(huì)對(duì) theexpression進(jìn)行求值，這就是我們發(fā)現(xiàn)第一個(gè)語法錯(cuò)誤的地方
//In
`${parseInt(100 * task.progress)}`%
//The expression is "parseInt(100 * task.progress)"
//simplifying we get
`${expression}`%
//and we know that `${expression}` is a string
現(xiàn)在可能更容易看出
"string"%
沒有語法意義。解決方案？把%?里面的template literal
`${parseInt(100?*?task.progress)}%`足夠簡單
向后移動(dòng)
{'width':`${parseInt(100 * task.progress)}`% ;}
可以改為
{'width':`${parseInt(100 * task.progress)}%` ;}
但;不屬于object.?例如，{'attr':'1';}無效。這給我們留下了
{'width':`${parseInt(100 * task.progress)}%`}
結(jié)尾
作為對(duì)讀者的挑戰(zhàn)，這相當(dāng)于
:style="{'width':parseInt(100?*?task.progress)}+'%'}"提供的鏈接應(yīng)該足以幫助理解。
TLDR：您有一個(gè)語法錯(cuò)誤；:style="{'width':`${parseInt(100 * task.progress)}%`}"作品
慕斯709654
TA貢獻(xiàn)1840條經(jīng)驗(yàn) 獲得超5個(gè)贊
除了一些語法錯(cuò)誤之外，它看起來不錯(cuò)：
:style="{'width': `${parseInt(100 * progress)}%`}"綁定是到一個(gè)對(duì)象，所以 a
;會(huì)不合適需要
%在字符串內(nèi)部
搖曳的薔薇
TA貢獻(xiàn)1793條經(jīng)驗(yàn) 獲得超6個(gè)贊
是的，可以在里面添加變量style。在你的情況下%應(yīng)該在引號(hào)內(nèi)。
<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>
添加樣式時(shí)不需要包含;，因?yàn)闃邮綌?shù)據(jù)是一個(gè)對(duì)象，并且將commas像這樣分隔
:style="{'width':`${parseInt(100 * task.progress)}%`, color:'red'}"
- 3 回答
- 0 關(guān)注
- 214 瀏覽
添加回答
舉報(bào)
0/150
提交
取消