最佳方法将Font Awesome星星类从”regular”更改为”solid”。

huangapple
go评论100阅读模式
英文:

Best way to change FontAwsome stars class regular to solid

问题

要根据一个名为level的数字变量从0到5来将FontAwesome Icons的5个星星的类从regular更改为solid，您可以使用条件语句和循环来避免重复<div>五次。以下是示例代码：

  1. <template>
  2.     <div id="five-stars">
  3.         <font-awesome-icon
  4.             v-for="star in 5"
  5.             :key="star"
  6.             :icon="star <= level ? 'fa-solid fa-star' : 'fa-regular fa-star'"
  7.             size="6x"
  8.         />
  9.     </div>
  10. </template>
  12. <script>
  13. export default {
  14.   name: "ThreeScene",
  15.   data() {
  16.     return {
  17.       level: 1
  18.     };
  19.   }
  20. }
  21. </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

  1. &lt;template&gt;
  2.     &lt;div id=&quot;five-stars&quot;&gt;
  3.       &lt;font-awesome-icon icon=&quot;fa-solid fa-star&quot; size=&quot;6x&quot;/&gt;
  4.       &lt;font-awesome-icon icon=&quot;fa-regular fa-star&quot; size=&quot;6x&quot;/&gt;
  5.       &lt;font-awesome-icon icon=&quot;fa-regular fa-star&quot; size=&quot;6x&quot;/&gt;
  6.       &lt;font-awesome-icon icon=&quot;fa-regular fa-star&quot; size=&quot;6x&quot;/&gt;
  7.       &lt;font-awesome-icon icon=&quot;fa-regular fa-star&quot; size=&quot;6x&quot;/&gt;
  8.     &lt;/div&gt;
  9. &lt;/template&gt;
  11. &lt;script&gt;
  12. export default {
  13.   name: &quot;ThreeScene&quot;,
  14.   data() {
  15.     return {
  16.       level: 1
  17.     };
  18.   }
  19. }

Can you please tell me how can I do that without repeating the &lt;div&gt; five times? thanks in advance.

答案1

得分: 1

fa-${i &lt;= level ? &#39;solid&#39; : &#39;regular&#39;} 帮助你：

  1. <template>
  2.   <div id="five-stars">
  3.     <font-awesome-icon v-for="i in 5" :key="i" :icon="`fa-${i &lt;= level ? &#39;solid&#39; : &#39;regular&#39;} fa-star`" size="6x"/>
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  9.   name: "ThreeScene",
  10.   data() {
  11.     return {
  12.       level: 1
  13.     };
  14.   }
  15. }
  16. </script>
英文:

fa-${i &lt;= level ? &#39;solid&#39; : &#39;regular&#39;} help you :

  1. &lt;template&gt;
  2.   &lt;div id=&quot;five-stars&quot;&gt;
  3.     &lt;font-awesome-icon v-for=&quot;i in 5&quot; :key=&quot;i&quot; :icon=&quot;`fa-${i &lt;= level ? &#39;solid&#39; : &#39;regular&#39;} fa-star`&quot; size=&quot;6x&quot;/&gt;
  4.   &lt;/div&gt;
  5. &lt;/template&gt;
  7. &lt;script&gt;
  8. export default {
  9.   name: &quot;ThreeScene&quot;,
  10.   data() {
  11.     return {
  12.       level: 1
  13.     };
  14.   }
  15. }
  16. &lt;/script&gt;

答案2

得分: 0

使用 v-for 循环

  1. <template>
  2.     <div id="five-stars">
  3.         <font-awesome-icon 
  4.             v-for="level in 5"
  5.             :key="level"
  6.             :icon="`${level} fa-star`"
  7.             size="6x"
  8.         ></font-awesome-icon>
  9.     </div>
  10. </template>
  11. </html>
  13. <script setup>
  14. import { ref } from 'vue';
  16. const data = ref([
  17.   'fa-solid',
  18.   'fa-regular',
  19.   'fa-solid',
  20.   'fa-regular',
  21.   'fa-solid'
  22. ]);
  23. </script>

请注意，变量 level 从值 1 开始，而不是 0。

英文:

Use a v-for loop

  1. &lt;template&gt;
  2.     &lt;div id=&quot;five-stars&quot;&gt;
  3.       &lt;font-awesome-icon 
  4.         v-for=&quot;level in 5&quot; 
  5.         :key=&quot;level&quot;
  6.         :icon=&quot;`${level} fa-star&quot; 
  7.         size=&quot;6x&quot;
  8.       /&gt;
  9.     &lt;/div&gt;
  10. &lt;/template&gt;
  12. &lt;script setup&gt;
  13. import { ref } from &#39;vue&#39;
  15. const data = ref([
  16.   &#39;fa-solid&#39;,
  17.   &#39;fa-regular&#39;,
  18.   &#39;fa-solid&#39;,
  19.   &#39;fa-regular&#39;,
  20.   &#39;fa-solid&#39;
  21. ])
  23. &lt;/script&gt;

note that the variable level will start with the value of 1, not 0.

huangapple
  • 本文由 发表于 2023年2月23日 23:21:52
  • 转载请务必保留本文链接：https://go.coder-hub.com/75546830.html
  • font-awesome
  • javascript
  • vue.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定