在Vue中动态更改图标变体

data() {
  return {
    isVariant1: true,
    isVariant2: false
  }
}

<template>
  <div>
    <i v-if="isVariant1" class="fas fa-star"></i>
    <i v-if="isVariant2" class="fas fa-heart"></i>
  </div>
</template>

<template>
  <div>
    <i :class="{'fas fa-star': isVariant1, 'fas fa-heart': isVariant2}"></i>
  </div>
</template>

methods: {
  changeVariant() {
    this.isVariant1 = !this.isVariant1;
    this.isVariant2 = !this.isVariant2;
  }
}