제목은 다음과 같이 다시 작성되었습니다. Vue.js 3 및 Tailwind CSS에서 RatingBar 구성 요소의 동적 너비 렌더링 문제 해결
<p>저는 Vue.js 3과 Tailwind CSS를 사용하고 있습니다. RatingBar라는 구성 요소가 있고 상위 요소의 클래스에 동적 너비 값을 적용하려고 합니다. 하지만 DevTools에서 예상 너비를 볼 수 있지만 100%로 렌더링됩니다. </p>
<p>이것은 RatingBar.vue 구성요소에 있는 코드입니다: </p>
<pre class="brush:js;toolbar:false;"><템플릿>
<div class="my-2 그리드 Grid-cols-3 항목-센터">
<span class="text-left text-sm">{{ 장르.이름 }}</span>
<div class="h-2 flex-1 rounded-lg bg-gray-800">
<div
class="h-full rounded-lg bg-secondary"
:class="`w-[${Math.floor(genre.rated * 10)}%]`"
></div>
</div>
<div class="ml-2 flex flex-row items-center gap-1 text-sm text-gray-600">
<i class="fa-regular fa-star"></i>
<span class="flex flex-row gap-1">
<스팬>
{{ 장르 등급 }}
</스팬>
<span> ({{ 장르.수 }}) </span>
</스팬>
</div>
</div>
</템플릿>
<스크립트 설정>
const 소품 = 정의Props({
장르: {
유형: 객체,
필수: 사실,
},
})
</스크립트>
</pre>
<p>렌더링된 HTML 출력은 <code>w-[75%]</code> 너비의 <div>로 표시됩니다. </p>
<pre class="brush:html;toolbar:false;"><div class="h-full rounded-lg bg-secondary w-[75%]"></div>
</pre>
<p>这是我的package.json文件：</p>
<pre class="brush:json;toolbar:false;">{
"이름": "프로젝트_이름",
"버전": "0.0.0",
"비공개": 사실,
"스크립트": {
"dev": "초대",
"build": "vite 빌드",
"preview": "초대 미리보기"
},
"종속성": {
"축": "^1.4.0",
"firebase": "^9.22.1",
"vue": "^3.3.2",
"vue-router": "^4.2.0"
},
"devDependency": {
"@vitejs/plugin-vue": "^4.2.3",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.23",
"더 예뻐요": "^2.8.8",
"prettier-plugin-tailwindcss": "^0.3.0",
"tailwindcss": "^3.3.2",
"초대": "^4.3.5"
}
}
</pre>
<p>请问您能帮我解决这个问题吗?</p>
<p>我尝试는 RatingBar组件中使用静态值作为宽島，它正确渲染。然而，当我尝试使用动态值时，使用表达式<code> ;:class="w-[${수학 .floor(genre.rated * 10)}%]"</code>
<p>저희는 bg-secondary 유형의 div에 대한 등급이 7.5%이고 등급이 75%에 달합니다.</p >
<p>DevTools中验证了宽島值, 但渲染의 HTML은 100%로 출력할 수 없으며, 더 이상 사용할 수 없습니다.</p>
<p>저희는 RatingBar에서 평점을 매기고 있습니다.</p>
