我想根据从 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
};
}
}
您能告诉我如何在不重复 五次的情况下做到这一点吗？提前致谢。
使用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。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>