<p>我正在使用Vue.js 3和Tailwind CSS。我有一个名为RatingBar的组件，我试图将动态宽度值应用于父元素的class。然而，尽管我在DevTools中可以看到期望的宽度，但它渲染为100%。</p> <p>这是我在RatingBar.vue组件中的代码：</p> <pre class="brush:js;toolbar:false;">&lt;template&gt; &lt;div class=&quot;my-2 grid grid-cols-3 items-center&quot;&gt; &lt;span class=&quot;text-left text-sm&quot;&gt;{{ genre.name }}&lt;/span&gt; &lt;div class=&quot;h-2 flex-1 rounded-lg bg-gray-800&quot;&gt; &lt;div class=&quot;h-full rounded-lg bg-secondary&quot; :class=&quot;`w-[${Math.floor(genre.rating * 10)}%]`&quot; &gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;ml-2 flex flex-row items-center gap-1 text-sm text-gray-600&quot;&gt; &lt;i class=&quot;fa-regular fa-star&quot;&gt;&lt;/i&gt; &lt;span class=&quot;flex flex-row gap-1&quot;&gt; &lt;span&gt; {{ genre.rating }} &lt;/span&gt; &lt;span&gt; ({{ genre.count }}) &lt;/span&gt; &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;script setup&gt; const props = defineProps({ genre: { type: Object, required: true, }, }) &lt;/script&gt; </pre> <p>渲染的HTML输出在<div>中显示宽度为<code>w-[75%]</code>：</p> <pre class="brush:html;toolbar:false;">&lt;div class=&quot;h-full rounded-lg bg-secondary w-[75%]&quot;&gt;&lt;/div&gt; </pre> <p>这是我的package.json文件：</p> <pre class="brush:json;toolbar:false;">{ &quot;name&quot;: &quot;project_name&quot;, &quot;version&quot;: &quot;0.0.0&quot;, &quot;private&quot;: true, &quot;scripts&quot;: { &quot;dev&quot;: &quot;vite&quot;, &quot;build&quot;: &quot;vite build&quot;, &quot;preview&quot;: &quot;vite preview&quot; }, &quot;dependencies&quot;: { &quot;axios&quot;: &quot;^1.4.0&quot;, &quot;firebase&quot;: &quot;^9.22.1&quot;, &quot;vue&quot;: &quot;^3.3.2&quot;, &quot;vue-router&quot;: &quot;^4.2.0&quot; }, &quot;devDependencies&quot;: { &quot;@vitejs/plugin-vue&quot;: &quot;^4.2.3&quot;, &quot;autoprefixer&quot;: &quot;^10.4.14&quot;, &quot;postcss&quot;: &quot;^8.4.23&quot;, &quot;prettier&quot;: &quot;^2.8.8&quot;, &quot;prettier-plugin-tailwindcss&quot;: &quot;^0.3.0&quot;, &quot;tailwindcss&quot;: &quot;^3.3.2&quot;, &quot;vite&quot;: &quot;^4.3.5&quot; } } </pre> <p>请问您能帮我解决这个问题吗？</p> <p>我尝试在RatingBar组件中使用静态值作为宽度，它正确渲染。然而，当我尝试使用动态值作为宽度时，使用表达式<code>:class=&quot;w-[${Math.floor(genre.rating * 10)}%]&quot;</code>，渲染结果并不如预期。它总是渲染为宽度为100%，而不是应用计算得到的宽度。</p> <p>我期望具有bg-secondary类的div元素的宽度与基于genre.rating值计算的百分比相对应。例如，如果genre.rating为7.5，宽度应该是75%。</p> <p>尽管在DevTools中验证了宽度值，但渲染的HTML输出始终将宽度显示为100%，而不管实际计算得到的值如何。</p> <p>我将非常感谢您对如何解决此问题并使RatingBar组件中的动态宽度正确渲染的任何见解或建议。</p>

<div
  class="h-full rounded-lg bg-secondary"
  :style="{ width: `${Math.floor(genre.rating * 10)}%` }"
></div>