Vue在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染，例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<template v-if="type==='name'">
<label>用户名：</label>
<input type="text" placeholder="输入用户名">
</template>
<template v-else>
<label>邮箱</label>
<input type="text" placeholder="输入邮箱">
</template>
<button @click="handleToggleClick">切换输入类型</button>
</div>
<script>
//input和label会被复用 不信你看控制台Elements 在用户名input输入内容后，点击button，会发现input的内容没有改变！！！！！
var app=new Vue({
el:'#app',
data:{
type:'name'
},
methods:{
handleToggleClick:function(){
this.type=this.type==='name'?'mail':'name';
}
}
})
</script>
</body>
</html>
注意：：
可以使用添加key属性，取消元素的复用。（key值必须是唯一的！！！！！！！！）