javascript - 使用 Vue.js 过渡来显示内容，但只让过渡发生一次

Question

我已使用下面链接的 Vue.js 文档来创建显示过渡，如何在第二次单击时停止隐藏？

https://v2.vuejs.org/v2/guide/transitions.html#a

我可以使用此转换或其他方法吗？我已尝试使用 .once 来尝试阻止第二次发生。

我还尝试使用以下方法创建方法:

v-on:change.once="animate()"

以及方法:

    animate: function() {
      var self = this;
      self.show = true;
    },

Answer 1

我不确定这是否正是您想要的，但正如您所建议的，我在以下代码中尝试了 @click.once ，然后转换仅发生一次:

<button type="button" class="btn btn-secondary" @click.once="switc = !switc">
  <span>Switch</span>
</button>

这里正在工作 fiddle : Switch 按钮仅允许转换一次。