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