Javascript Vue.js可以'；t切换字体图标

我试图根据布尔值切换字体可怕图标，但绘制后，字体可怕图标似乎仍保留在屏幕上：

HTML:

我是否做错了什么，或者font awesome或vue.js中是否存在错误？

在使用svg后，请使用一些wrap

此答案适用于将font awesome与svg一起使用。 出于某种原因，您需要将

i

标记包装两次。例如，与此相反：

<div v-if="condition">
  <i class="fal fa-caret-left"></i>
</div>
<div v-else>
  <i class="fas fa-caret-left"></i>
</div>

这样做：

<template v-if="condition">
  <div>
    <i class="fal fa-caret-left"></i>
  </div>
</template>
<template v-else>
  <div>
    <i class="fas fa-caret-left"></i>
  </div>
</template>

我不完全确定为什么需要将它包装两次，因为我认为通过包装一次就可以将

I

标记充分解耦，但它对我来说是这样的，所以显然还有其他事情要做

---

另外，请记住，内部的

div

无法替换为

template

，原因很明显（模板标记不会被渲染）。

我最近在将Vue.js 2.5.x与FontAwesome 5.5.x一起使用时遇到了这个问题-图标类没有按预期进行更新

从FontAware Web Fonts+CSS实现切换到SVG+JS后，以下代码不再工作：

<i :class="[sortByFirstNameAsc ? 'fa-chevron-up' : 'fa-chevron-down', 'fa']"></i>

---

使用其Vue组件避免DOM中冲突的文档：

请注意兼容性 如果您使用的是Vue，则需要带有CSS的软件包或Web字体

SVG核心包在以下情况下很有用，建议使用：

• 将大量图标子集为仅使用的图标
• 作为使用React、Angular、Vue或Ember等工具进行大型集成的基础库（事实上，我们自己的组件使用这些包）
• 作为常见的JS/ES6模块捆绑工具，如Webpack、Rollup或Parcel
• 像RequireJS这样的UMD样式加载程序库
• 直接在服务器上使用CommonJS（请参阅我们的服务器端渲染文档

---

我通过为每个图标创建一个模板，然后根据布尔值有条件地加载任何一个模板，解决了这个问题

以下是我的主要模板：

---

您使用的字体库并不了解Vue。它将您编写的

转换为

，此时，它已从Vue中被盗。Vue不再控制它。这是一个很好的方法：用

包装它。但随后您指出了另一个不适用的场景

若要解决使用

包装仍不起作用的情况，请使用

key=“fa sort up”

。这将强制Vue重新渲染包装，此时Font-Awesome将更新图标。以下是示例：

---

您可以使用任何您想要的键，只要它是唯一的。

在vue中使用Fontsome切换复选框

<style>
  .fa-check-square::before {
    color: green; 
  }
</style>

<script>
  Vue.component('some',
    {
      data: 
        function() {
          return{
            isclick: false
          }
        },
      methods: {
        isClicked: function() {
          this.isclick = !this.isclick;
        }
      },
      template: '<div id="test" v-on:click="isClicked">' +
        '<i v-if="isclick" class="fa fa-check-square" style="font-size: 40px;"></i>' +
        '<i v-if="!isclick" class="far fa-square" style="font-size: 40px;"></i>' +
        '</div>'
    });

</script>

<div id="componentsDemo">
  <some></some>
  <some></some>
  <some></some>
  <some></some>
</div>

<script>
  new Vue({ el: '#componentsDemo' });
</script>

.fa方格：：之前{
颜色：绿色；
}
Vue.component（'some'，
{
数据：
函数（）{
返回{
isclick:错误
}
},
方法：{
isClicked:function（）{
this.isclick=！this.isclick；
}
},
模板：“”+
'' +
'' +
''
});
新的Vue（{el:'#componentsDemo'}）；

这有时会保留，有时不会。你也看到了这种行为吗？我认为，一旦它出现，它就会保留。我讨厌在我教别人时发生这种事情。这会扰乱我的思维。在这种情况下，这不会有帮助：我从js切换到css，正如上面链接中提到的，这解决了问题。谢谢！我想不出来为什么我的SVG没有从DOM中删除

<i :class="[sortByFirstNameAsc ? 'fa-chevron-up' : 'fa-chevron-down', 'fa']"></i>

<span data-v-2614dbd6="">
  <svg data-v-2614dbd6="" class="svg-inline--fa fa-caret-up" ...">
    ...
  </svg>

  <!-- <i data-v-2614dbd6="" class="fa fa-caret-up"></i> -->
</span>

<span v-show="sortByFirstNameAsc"><i class="fa fa-caret-up"></i></span>
<span v-show="sortByFirstNameDesc"><i class="fa fa-caret-down"></i></span>

<style>
  .fa-check-square::before {
    color: green; 
  }
</style>

<script>
  Vue.component('some',
    {
      data: 
        function() {
          return{
            isclick: false
          }
        },
      methods: {
        isClicked: function() {
          this.isclick = !this.isclick;
        }
      },
      template: '<div id="test" v-on:click="isClicked">' +
        '<i v-if="isclick" class="fa fa-check-square" style="font-size: 40px;"></i>' +
        '<i v-if="!isclick" class="far fa-square" style="font-size: 40px;"></i>' +
        '</div>'
    });

</script>

<div id="componentsDemo">
  <some></some>
  <some></some>
  <some></some>
  <some></some>
</div>

<script>
  new Vue({ el: '#componentsDemo' });
</script>