v-if切换时，绑定的methods方法未切换问题

vue使用注意点-v-if

• 关于key在v-if中的使用

一般我们在vue中使用v-if的时候不会用加key,而且也不会出现问题

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>

按照官方文档，v-if切换时DOM会被销毁，而v-show只是切换元素的display。
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder.

• 出现问题的地方

当v-if的代码之间具有相同代码结构，相同部分不会渲染。那么如果v-if和v-else其中一项代码绑定了事件，实际操作会发现都会调用该事件

• 方法- 加key

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

每次切换时，输入框都将被重新渲染