通过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的值有没有变化，基本问题原因就是这几个地方了。