标题重写为：解决Vue.js 3和Tailwind CSS中RatingBar组件动态宽度渲染问题-PHP中文网问答

我正在使用Vue.js 3和Tailwind CSS。我有一个名为RatingBar的组件，我试图将动态宽度值应用于父元素的class。然而，尽管我在DevTools中可以看到期望的宽度，但它渲染为100%。

这是我在RatingBar.vue组件中的代码：

<template>
  <div class="my-2 grid grid-cols-3 items-center">
    <span class="text-left text-sm">{{ genre.name }}</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.rating * 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>
          {{ genre.rating }}
        </span>
        <span> ({{ genre.count }}) </span>
      </span>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  genre: {
    type: Object,
    required: true,
  },
})
</script>

渲染的HTML输出在

中显示宽度为w-[75%]：

<div class="h-full rounded-lg bg-secondary w-[75%]"></div>

这是我的package.json文件：

{
  "name": "project_name",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.4.0",
    "firebase": "^9.22.1",
    "vue": "^3.3.2",
    "vue-router": "^4.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.23",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.3.0",
    "tailwindcss": "^3.3.2",
    "vite": "^4.3.5"
  }
}

请问您能帮我解决这个问题吗？

我尝试在RatingBar组件中使用静态值作为宽度，它正确渲染。然而，当我尝试使用动态值作为宽度时，使用表达式:class="w-[${Math.floor(genre.rating * 10)}%]"，渲染结果并不如预期。它总是渲染为宽度为100%，而不是应用计算得到的宽度。

我期望具有bg-secondary类的div元素的宽度与基于genre.rating值计算的百分比相对应。例如，如果genre.rating为7.5，宽度应该是75%。

尽管在DevTools中验证了宽度值，但渲染的HTML输出始终将宽度显示为100%，而不管实际计算得到的值如何。

我将非常感谢您对如何解决此问题并使RatingBar组件中的动态宽度正确渲染的任何见解或建议。

P粉803527801

全部回复(1)

P粉2621135692023-09-02 09:40:10 1楼

根据文档：

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

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

赞 +0

添加回复