使用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>