使用v-if v-else控制該顯示那個name還是email div,如果不加key的話,就會複用input,加了後name那個input就不會被email複用。
v-show與v-if的區別是v-show即使爲false只是不顯示,但是DOM節點是存在的,而v-if爲falseDOM節點是不存在的。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue1</title> <script src="vue.js"></script> <link rel="stylesheet" type="text/css" href="vue.css"> </head> <body> <div id="app"> <div v-if="flag" key="sss"> <p>name</p> <input type="text" > </div> <div v-else> <p>email</p> <input type="text" > </div> <button @click="submit">submit</button> </div> <script> var app=new Vue({ el:"#app", data:{ msg:"", flag:true }, methods:{ submit:function(){ this.flag=!this.flag } } }) </script> </body> </html>