<!DOCTYPE html> <html> <head> <title>组件的切换</title> <meta charset="utf-8"> </head> <body> <!-- 方式一:结合v-if及v-else 只能实现两个组件的切换--> <div id="app"> <!-- 添加事件修饰符prevent，阻止跳转 --> <a href="" @click.prevent="flag=true">登录</a> <a href="" @click.prevent="flag=false">注册</a> <login v-if="flag"></login> <register v-else="flag"></register> </div> <!-- 方式二：使用vue提供的元素component 可实现多个组件的切换--> <div id="app2"> <a href="" @click.prevent="comName=login">登录</a> <a href="" @click.prevent="comName=register">注册</a> <!-- vue提供的元素，来展示对应名称的组件 --> <!-- component是一个占位符，:is属性是指定组件的名称 --> <component :is="comName"></component> </div> </body> <script src="node_modules\vue\dist\vue.js"></script> <script> Vue.component("login",{ template:"<h3>登录组件</h3>" }) Vue.component("register",{ template:"<h3>注册组件</h3>" }) let vm = new Vue({ el:"#app", data:{ flag:false } }); let vm2 = new Vue({ el:"#app2", data:{ comName:"login" } }) </script> </html>
vue实现组件切换的两种方式
猜你喜欢
转载自www.cnblogs.com/angle-xiu/p/11748665.html
今日推荐
周排行