通过v-if切换之后，这两个图标样式并没有变，始终都是第一个？应该怎么改？

Question

通过v-if切换之后，这两个图标样式并没有变，始终都是第一个 <i style="width: 14px; height: 14px;" class="far fa-star"></i><i style="width: 14px; height: 14px;" class="fas fa-star"></i> <span id="span1" v-if="isCollected===false" @click="toCollection">                       <!--<font-awesome-icon-->                         <!--style="width: 14px; height: 14px;"-->                         <!--:icon="['far','star']" />-->                         <i style="width: 14px; height: 14px;" class="far fa-star"></i>                       <span>收藏</span>                     </span>                     <span id="span2" v-if="isCollected===true" @click="toCancel">                       <!--<font-awesome-icon-->                         <!--style="width: 14px; height: 14px;"-->                         <!--:icon="['fas','star']" />-->                         <i style="width: 14px; height: 14px;" class="fas fa-star"></i>                       <span>已收藏</span>                     </span>

Answer 1

建议重新排下版，缩进一下，另外布尔值可以直接用v-if判断。
样式没有变首先可以先看一下class的值有没有变，若有改变再检查下far和fas是不是用的就是同一个图标，若没有改变检查isCollected的值有没有变化，基本问题原因就是这几个地方了。