我很難找出在 CSS 行內樣式中使用 vue 函式回傳的變數的最佳方法，在本例中是“寬度”樣式。
我有 2 個變數回傳到模板，我可以使用 {{}} 語法，但不能作為 CSS 樣式。
這作業正常：
Total Staked {{ gems }}/{{ size }} ({{
Math.round((gems / size) * 100)
}}%)
渲染時看起來像這樣：Total Staked 200/350 (57%)
我想將計算出的百分比 (57%) 放入 css 行內樣式中，如下所示：
<div class="bg-black h-2 rounded-md text-white" style="width: 57%"></div>
其中 width: 57% 是動態填充的。
我正在使用帶有 Tailwind CSS 的 Vue 3
這是一個 Codepen：https ://codepen.io/johnwinsor/pen/RwxvdZZ
謝謝！
uj5u.com熱心網友回復：
您可以創建計算屬性并系結您的樣式：
new Vue({
el: "#app",
data() {
return {
gems: 300,
size: 350
};
},
computed: {
wid() {
return Math.round((this.gems / this.size) * 100)
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y lMz2Mklv18 r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1 68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="app">
<div>
<!-- Thermometer -->
<div class="w-2/3 h-2 pl-5 pr-5 m-auto">
<div class="w-full h-2 mt-6 mb-2 bg-red-500 rounded-md">
<div class="bg-black h-2 rounded-md text-white" :style="`width: ${wid}%`"></div>
</div>
</div>
<!-- Caption -->
<div class="flex flex-wrap justify-center align-center pb-5">
<p class="text-red-600">
Total Staked {{ gems }}/{{ size }} ({{ wid }}%)
</p>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/460832.html
標籤：javascript css Vue.js Vuejs3 顺风CSS
上一篇：php中的addItem單元測驗