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