首頁  >  問答  >  主體

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

我想根據從 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
    };
  }
}

您能告訴我如何在不重複

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

P粉998100648P粉998100648423 天前603

全部回覆(2)我來回復

  • P粉733166744

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

    使用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粉135292805

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

    fa-${i <= 级别? 'solid' : 'regular'} 幫助您:

    <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
  • 取消回覆