Javascript vue v-if/v-else不会从按钮中删除样式

我将vuejs2用于带引导的Web应用程序

我有两个带和v-else的块，所以只有一个渲染。我在每个模块中都有引导按钮。当我从第一个div按下按钮时，第二个div变为可见，反之亦然

问题是当我点击第一个div的按钮时，第二个div的按钮出现了，但它仍然是聚焦的，我想有一个普通的按钮，但它是聚焦的轮廓

以下是简化代码：

<div id="app"> 
    <div v-if="switc">
      <button type="button" class="btn btn-secondary" @click="switc = !switc">
        <span >First</span>
      </button>
   </div>
   <div v-else>
    <button type="button" class="btn btn-secondary">
        <span>Second</span>
      </button>
   </div>
   <br>   <br>
   <button type="button" class="btn btn-secondary" @click="switc = !switc">
     <span>Switch</span>
   </button>
</div>

弗斯特
第二



转换

这里是工作，如果你按下第一个按钮，第二个仍然显示大纲。

我错过了这个：在文档中。Vue尝试尽可能高效地渲染元素，经常重复使用它们，而不是从头开始渲染。在我的例子中，它似乎也在使用相同的组件并完全重新渲染它

要修复它，我只需要在每个按钮中添加

键

字段，如下所示：

    <div v-if="switc">
      <button type="button" class="btn btn-secondary" @click="switc = !switc" key="first">
        <span >First</span>
      </button>
   </div>
   <div v-else>
    <button type="button" class="btn btn-secondary" key="second">
        <span>Second</span>
      </button>
   </div>

弗斯特
第二

更新的小提琴