Cara terbaik untuk menukar FontAwsome kelas bintang umum kepada tetap
P粉998100648
P粉998100648 2023-09-13 12:48:36
0
2
620

Saya mahu menukar kategori 5 bintang ikon FontAwesome daripada biasa kepada pepejal berdasarkan 0 更改为 5 的数字变量 level

<template>
    <div id="five-stars">
      <font-awesome-icon icon="fa-solid fa-star" size="6x"/>
      <font-awesome-icon icon="fa-regular fa-star" size="6x"/>
      <font-awesome-icon icon="fa-regular fa-star" size="6x"/>
      <font-awesome-icon icon="fa-regular fa-star" size="6x"/>
      <font-awesome-icon icon="fa-regular fa-star" size="6x"/>
    </div>
</template>

<script>
export default {
  name: "ThreeScene",
  data() {
    return {
      level: 1
    };
  }
}
Bolehkah anda memberitahu saya bagaimana untuk melakukan ini tanpa mengulanginya

lima kali? Terima kasih terlebih dahulu.

P粉998100648
P粉998100648

membalas semua(2)
P粉733166744

Gunakan v-untuk gelung

<template>
    <div id="five-stars">
      <font-awesome-icon 
        v-for="level in 5" 
        :key="level"
        :icon="`${level} fa-star" 
        size="6x"
      />
    </div>
</template>

<script setup>
import { ref } from 'vue'

const data = ref([
  'fa-solid',
  'fa-regular',
  'fa-solid',
  'fa-regular',
  'fa-solid'
])

</script>

Sila ambil perhatian bahawa pembolehubah level将从值1开始,而不是0.

P粉135292805

fa-${i Bantu anda:

<template>
  <div id="five-stars">
    <font-awesome-icon v-for="i in 5" :key="i" :icon="`fa-${i <= level ? 'solid' : 'regular'} fa-star`" size="6x"/>
  </div>
</template>

<script>
export default {
  name: "ThreeScene",
  data() {
    return {
      level: 1
    };
  }
}
</script>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan