Vue.js can#39;t toggle a font-awesome icon(Vue.js不能切换字体-可怕的图标)

本文介绍了Vue.js不能切换字体-可怕的图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试基于布尔值切换字体棒图标，但在绘制后，字体棒图标似乎仍保留在屏幕上：

https://jsfiddle.net/50wL7mdz/200312/

HTML：

<script src="https://unpkg.com/vue"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>



<div id="app">
  <input v-model="marked" type="checkbox"/>
  <i v-if="marked" class="far fa-check-square"></i>
</div>

JS：

new Vue({
  el: '#app',
  data: {
    marked: false
  }
})

是我做错了什么，还是Font-awed或vue.js中有错误？

svg

"i"标记注释转成推荐答案后，使用一些换行<span v-if="marked"><i class="far fa-check-square"></i></span>

这篇关于Vue.js不能切换字体-可怕的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！