</div>
<div class="input-group" v-else>
<label for="email">email:</label>
<input type="text" name="email" placeholder="email" key="email" />
</div>
<button v-on:click.prevent="toggle">toggle</button>
</form>
</div>
......
var app = new Vue({
el: '#app',
data: {
name: true
},
methods: {
toggle: function () {
this.name = ! this.name;
}
}
});
像这样，为这两个不需要“优化”的 input 元素添加了唯一标识的 key 以后，vue 便不会再复用这两个元素。每次切换之后，修改的内容将不会被保留。
三、更多思考
（1）基于标签的指令（v-bind 、v-if）
Handlebars 的 helpers 有自己独立的语法，比如：
{{#if ok}}
<h1>Yes</h1>
{{/if}}它定义了一组自己的语法。而实现同样的功能，vue 使用类似于 v-bind、v-if 之类的指令，它们都是绑定在一个个标签上面的，如
<h1 v-if="ok">Yes</h1>这样的语法更加简洁、清晰。
Handlebars 的语法，支持同时绑定多个 DOM 节点。
{{#if ok}}
<h1>Yes</h1>
<h1>Yes</h1>
<h1>Yes</h1>
{{/if}}按照前面的思路，难道 vue 要实现成这样？
<h1 v-if="ok">Yes</h1>
<h1 v-if="ok">Yes</h1>
<h1 v-if="ok">Yes</h1>那根本不可能，添加额外的 DOM 节点包裹住它们？那就更不可能。vue 扩展了一个 template 节点，使用的时候，我们可以像 HTML 节点一样去使用它，但是渲染页面的时候，它不会被渲染在页面上。于是，前面的代码可以实现成这样：
<template v-if="ok">
<h1>Yes</h1>
<h1>Yes</h1>
<h1>Yes</h1>
</template>想想，其实和 Handlebars 也差不多了，甚至显得还要复杂些了，毕竟 template 这个单词这么长~
（2）利用条件渲染字符串
前面说，v-if 等指令都是基于标签的，那如果我不想创建额外的标签，只是想按照条件去修改一个字符串呢？没错，你猜对了，template 节点，它里面除了可以存放节点，也可以直接存放字符串，就像这样：
<div id="app">
<template v-if="c3">text</template>
</div>
......
var app = new Vue({
el: '#app',
data: {
c3: true
}
