我想根據從 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 }; } }
您能告訴我如何在不重複
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>