Der Titel wird wie folgt umgeschrieben: Lösung des dynamischen Breitenwiedergabeproblems der RatingBar-Komponente in Vue.js 3 und Tailwind CSS

Question

Ich verwende Vue.js 3 und Tailwind CSS. Ich habe eine Komponente namens RatingBar und versuche, einen dynamischen Breitenwert auf die Klasse des übergeordneten Elements anzuwenden. Obwohl ich in DevTools die erwartete Breite sehen kann, wird sie mit 100 % gerendert.

Dies ist mein Code in der RatingBar.vue-Komponente:

<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 abgerundet-lg bg-gray-800">
      <div
        class="h-voll gerundet-lg bg-sekundär"
        :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">
        <spanne>
          {{ genre.rating }}
        </span>
        <span> ({{ genre.count }}) </span>
      </span>
    </div>
  </div>
</template>

<Skript-Setup>
const props = defineProps({
  Genre: {
    Typ: Objekt,
    erforderlich: wahr,
  },
})
</script>

Die gerenderte HTML-Ausgabe wird in

mit der Breite w-[75%] angezeigt:

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

这是我的package.json文件:

{
  "Name": "Projektname",
  „Version“: „0.0.0“,
  "privat": wahr,
  "Skripte": {
    "dev": "vite",
    "build": "vite build",
    "Vorschau": "Vite-Vorschau"
  },
  "Abhängigkeiten": {
    "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",
    "hübscher": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.3.0",
    "tailwindcss": "^3.3.2",
    "vite": "^4.3.5"
  }
}

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

时，使用表达式:class="w-[${Math .floor(genre.rating * 10)}%]"宽度.

宽度应该是75%.

值如何.

议.

Answer 1

根据文档：

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

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