將 FontAwsome 星星類常規更改為固定的最佳方法

Question

我想根據從 0 更改為 5 的數字變數 level 將 FontAwesome 圖示的 5 顆星類別從常規更改為實體

#

<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
    };
  }
}

您能告訴我如何在不重複

五次的情況下做到這一點嗎？提前致謝。

2

0

0

P粉998100648

回覆

全部回覆(2)

我來回復 關閉

P粉7331667442023-09-14 09:53:03 2樓

使用v-for迴圈

#

<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>

請注意，變數level將從值1開始，而不是0。

點贊 +0

新增回覆 关闭回复

P粉998100648

回覆

P粉1352928052023-09-14 00:58:58 1樓

fa-${i 幫助您：

<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>

點贊 +0

新增回覆 关闭回复

P粉998100648

回覆

Answer 1

使用v-for迴圈

#

<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>

請注意，變數level將從值1開始，而不是0。

Answer 2

fa-${i 幫助您：

<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>