SOURCE

var vm=new Vue({
  el:'#key',
  data:{
  loginType:'username'
},
  methods:{
    toggleType:function(){
      return this.loginType=this.loginType==='username'?'email':'username'
    }
  }
})

var vm_nokey=new Vue({
  el:'no_key',
  data:{
    type:'type'
  },
  methods:{
    toggle:function(){
      return this.type=this.type==='name'?'email':'name'
    }
  }
})

<div id='key'>
<div>
  <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>
  </div>
  <button v-on:click='toggleType'>Toggle login type</button>
</div>
<!--<div id='no_key'>
 <div>
  <template v-if="type === 'name'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>
  </div>
  <button v-on:click='toggle'>Toggle type</button>
</div> -->
<!-- 1.Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
2.添加一个具有唯一值的 key 属性，不复用。
3.带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。
4.v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
5.v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
6.v-for 具有比 v-if 更高的优先级。 -->