vue.js 最好的方法来改变FontAwsome星类定期到固体

ev7lccsx 于 2023-02-24 发布在 Vue.js

关注(0)|答案(2)|浏览(130)

我想根据从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
    };
  }
}

你能告诉我如何才能做到这一点，而不重复<div>五次吗？提前感谢。

vue.js

来源：https://stackoverflow.com/questions/75546830/best-way-to-change-fontawsome-stars-class-regular-to-solid

2条答案

按热度按时间

xqnpmsa81#

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>

赞(0）回复(0）举报 2023-02-24

j9per5c42#

使用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开始。

赞(0）回复(0）举报 2023-02-24

我来回答

vue.js 最好的方法来改变FontAwsome星类定期到固体

2条答案

相关问题

热门标签

最新问答