当前位置：首页 > VUE

vue实现图标点亮

2026-02-23 03:21:59VUE

实现图标点亮效果的方法

在Vue中实现图标点亮效果，通常可以通过动态绑定class或style来实现。以下是几种常见的方法：

使用动态class绑定

通过v-bind:class或:class绑定一个对象，根据条件动态切换类名。

<template>
  <div>
    <i 
      class="icon" 
      :class="{ 'active': isActive }" 
      @click="toggleActive"
    >★</i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive
    }
  }
}
</script>

<style>
.icon {
  color: gray;
  cursor: pointer;
}
.icon.active {
  color: gold;
}
</style>

使用动态style绑定

通过v-bind:style或:style直接绑定样式对象。

<template>
  <div>
    <i 
      class="icon" 
      :style="{ color: isActive ? 'gold' : 'gray' }" 
      @click="toggleActive"
    >★</i>
  </div>
</template>

使用第三方图标库

如果使用Font Awesome等图标库，可以结合动态class实现点亮效果。

<template>
  <div>
    <i 
      class="far fa-star" 
      :class="{ 'fas': isActive, 'far': !isActive }" 
      @click="toggleActive"
    ></i>
  </div>
</template>

使用SVG图标

对于更复杂的交互效果，可以使用SVG图标并控制其fill属性。

<template>
  <div>
    <svg 
      @click="toggleActive" 
      :fill="isActive ? 'gold' : 'gray'" 
      viewBox="0 0 24 24"
    >
      <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
    </svg>
  </div>
</template>

实现评分组件

如果需要实现星级评分组件，可以使用v-for循环生成多个图标。

vue实现图标点亮

<template>
  <div>
    <i 
      v-for="star in 5" 
      :key="star" 
      class="icon" 
      :class="{ 'active': star <= currentRating }" 
      @click="setRating(star)"
    >★</i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRating: 0
    }
  },
  methods: {
    setRating(rating) {
      this.currentRating = rating
    }
  }
}
</script>