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

【问题标题】：Using Vue.js transitions to show content but only letting the transition happen once使用 Vue.js 过渡来显示内容，但只让过渡发生一次
【发布时间】：2017-01-18 22:53:38
【问题描述】：

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

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

我能否使用此转换或其他方法，我已尝试使用 .once 来尝试停止第二次发生。

我也尝试过使用以下方法创建方法：

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

以及方法：

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

【问题讨论】：

你能创造一个小提琴。

标签： javascript vue.js vuejs2

【解决方案1】：

我不确定这是否正是您想要的，但就像您建议的那样，我在以下代码中尝试了@click.once，然后只发生一次转换：

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

这是工作fiddle：Switch 按钮只允许转换一次。

【讨论】：