英文:
Best way to change FontAwsome stars class regular to solid
问题
要根据一个名为level的数字变量从0到5来将FontAwesome Icons的5个星星的类从regular更改为solid，您可以使用条件语句和循环来避免重复<div>五次。以下是示例代码：
<template>
<div id="five-stars">
<font-awesome-icon
v-for="star in 5"
:key="star"
:icon="star <= level ? 'fa-solid fa-star' : 'fa-regular fa-star'"
size="6x"
/>
</div>
</template>
<script>
export default {
name: "ThreeScene",
data() {
return {
level: 1
};
}
}
</script>
这段代码使用了v-for循环来生成五个星星的图标，根据level的值决定是使用'solid'还是'regular'类。这样，您不需要重复<div>五次，而是在循环内动态生成图标。
英文:
I want to change the class of 5 stars of FontAwesome Icons from regular to solid according to a numeric variable levelthat changes from 0 to 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
};
}
}
Can you please tell me how can I do that without repeating the <div> five times? thanks in advance.
答案1
得分: 1
fa-${i <= level ? '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>
英文:
fa-${i <= level ? 'solid' : 'regular'} help you :
<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>
答案2
得分: 0
使用 v-for 循环
<template>
<div id="five-stars">
<font-awesome-icon
v-for="level in 5"
:key="level"
:icon="`${level} fa-star`"
size="6x"
></font-awesome-icon>
</div>
</template>
</html>
<script setup>
import { ref } from 'vue';
const data = ref([
'fa-solid',
'fa-regular',
'fa-solid',
'fa-regular',
'fa-solid'
]);
</script>
请注意，变量 level 从值 1 开始，而不是 0。
英文:
Use a v-for loop
<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>
note that the variable level will start with the value of 1, not 0.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论