vue学习笔记1——v-if和templete 条件渲染 使用 key 控制元素的可重用

在官网上看教程，根据教程记录一下笔记：
在进行条件渲染时，可使用 key 控制元素的可重用。
官网例子效果如下图：

点击按钮可进行切换。
具体的实现代码官网给出了，但是只是html的代码。
完整代码如下：
html：

<div class="demo">
    <button @click="greet">toggle 切换</button>
    <template v-if="ok">
      <label>用户名</label>
      <input placeholder="输入用户名" key="username-input">
    </template>
    <template v-else>
      <label>昵称</label>
      <input placeholder="输入昵称" key="nickname-input">
    </template>
</div>

js：

var vm = new Vue({
    el: '.demo',
    data: {
      ok: true
    },
    methods: {  
    greet: function (event) {  
      this.ok=!this.ok;
    }  
  }  
})

完成的效果为：

点击按钮：