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

【问题标题】：vue v-if/v-else does not remove style from buttonsvue v-if/v-else 不会从按钮中删除样式
【发布时间】：2017-01-18 10:41:44
【问题描述】：

我将 vuejs2 用于我的带有引导程序的 web 应用程序。

我有两个带有 v-if 和 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>

这里正在工作fiddle，如果你按第一个按钮，第二个按钮仍然显示轮廓。

【问题讨论】：

标签： javascript twitter-bootstrap vuejs2 vue.js

【解决方案1】：

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

要修复它，我只需要在每个按钮中添加 key 字段，如下所示：

    <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>

更新了小提琴here。

【讨论】：