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值必须是唯一的！！！！！！！！）