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相关问答推荐

VueJS不会呈现一个名为None的组件""

设置Vite Vue 3需要多个应用程序输出目录

Vuetify快速失败不会阻止发送表单

元素不会对react 性props 的更改做出react

如何在Vue3中使用vuechartjs 5.2从父组件更新图表

为什么 Pinia/Vuex 比使用服务类的classic 方法更受欢迎？

将 v-calendar 与以时间和日期格式出现的事件一起使用

通过元素加中的正则表达式输入电话号码格式

在 Vue 中启用(控制台)记录路由事件

指定一个 vue-cli vue.config.js 位置

在下拉菜单上使用箭头键滚动

如何在 vue.js 中包含当年的版权？

在 vue-router 中带有路由的 Vuejs2 模态

如何在 vuejs 中异步加载图像 src url？

单击复选框后，V-model 未更新

使用 VueJS 在 v-for 中转换

Amazon EC2 错误：监听 EACCES 0.0.0.0：80

为什么 vue 文档说 refs 不是响应式的，而实际上它们是响应式的

在 .vue 文件中使用 Vue.set() 和 Vue.use()

克隆元素并附加到 DOM 的正确方法