Vue.js 使用 vue nuxt js 切换 fontawesome 图标

<i class="fa-solid fa-heart"></i> //when active
<i class="fa-regular fa-heart"></i>  //when not active

<i class="fs-5" 
        role="button" 
        @click="!active" 
        :class="[active ? 'fa-solid fa-heart' : 'fa-regular fa-heart'] "
        ></i>

data() {
    return {
      active: false,
    }
  },

<i class="fs-5" 
        role="button" 
        @click="active = !active" 
        :class="['fa-heart',active ? 'fa-solid' : 'fa-regular'] "
        ></i>

Vue.js相关问答推荐

Vue 3 需要 main.js 中的文件

Vuetify右侧并排switch

点击屏幕的任何位置都会禁用v-overlay

Shopware 6，使用 vue-test-utils 进行Jest 测试：渲染模板上的意外行为

如何使用 Vite 从公共目录导入 JSON 文件？

使用 Vue.js 清除数组内容和react性问题

查找未销毁的 Vue 组件

从数据库中删除后，Vue.js $remove 不删除元素

Defer推迟执行，直到外部脚本加载到 Vue.js

使用带有 v-date-picker 的 new Date() 不起作用

Vue：从 Vue 实例更新组件数据

如何在nuxt路由中添加meta？

'vue' 未被识别为内部或外部命令

VueJS 2 在多个组件上debounce

如何在 vue.js 中进行嵌入？

使用 axios 和 vue.js 取消先前的请求

使用 vuejs 动态设置 id 标签

Vue Cli 3：定义的输出路径

Vuetify 离线文档

Vue-i18n - 无法读取未定义的属性配置