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;    }    }  })

完成的效果为：

点击按钮：