41组件-使用flag标识符和v-if与v-else实现组件的切换
<!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=adge"> <title>Document</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="button" value="显示登录" @click="flag=true"> <input type="button" value="显示注册" @click="flag=false"> <login v-if="flag"></login> <reg v-else="flag"></reg> </div> </body> <script> Vue.component("login",{ template:"<h1>用户登录</h1>" }) Vue.component("reg",{ template:"<h1>用户注册</h1>" }) //创建Vue实例,得到ViewModel var vm=new Vue({ el:"#app", data:{ flag:true//如果flag为true,显示登录,为false显示注册 }, methods:{} }); </script> </html>