标题重写为:解决Vue.js 3和Tailwind CSS中RatingBar组件动态宽度渲染问题
P粉803527801
P粉803527801 2023-09-01 10:19:15
[Vue.js讨论组]
<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>
P粉803527801
P粉803527801

全部回复(1)
P粉262113569

根据文档

相反,你可以使用style属性来设置width

<div
  class="h-full rounded-lg bg-secondary"
  :style="{ width: `${Math.floor(genre.rating * 10)}%` }"
></div>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号