Heim > Fragen und Antworten > Hauptteil
Ich möchte die 5-Sterne-Kategorie des FontAwesome-Symbols basierend auf 0
更改为 5 的数字变量
level
von „Normal“ auf „Fest“ ändern
<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
};
}
}
代码>Können Sie mir sagen, wie das geht, ohne es
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
。
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>