Vue实现组件切换的两种方式介绍(附代码)
程序员文章站
2022-03-21 12:06:07
...
本篇文章给大家带来的内容是关于Vue实现组件切换的两种方式介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
Vue 的组件切换的几种方式
方式一: v-if 和 v-else 结合使用实现切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script rel="script" src="js/vue-2.4.0.js"></script></head><body> <div id="app"> <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><script> *<!--定义登录组件-->* Vue.component('login',{ template :'<h3>登陆组件</h3>' }); *<!--定义注册组件-->* Vue.component('register',{ template :'<h3>注册组件</h3>' }); *<!--创建Vue实例-->* var vm = new Vue({ el : '#app', data :{ flag : true, }, methods:{}, });</script></body></html>
运行结果:点击登录或注册 进入相应的组件模块
注意:使用 v-if 和 v-else 实现切换,只能在两个组件间相互切换,不能实现多个组件的切换
方式二: 使用Vue提供的component元素实现组件切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script rel="script" src="js/vue-2.4.0.js"></script></head><body> <div id="app2"> <!-- 链接修改comName的值--> <a href="" @click.prevent="comName = 'login' ">登陆2</a> <a href="" @click.prevent="comName = 'register' ">注册2</a> <!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 --> <component :is=" comName "></component> </div><script> //组件名称是 字符串 Vue.component('login',{ template :'<h3>登陆组件</h3>' }) Vue.component('register',{ template :'<h3>注册组件</h3>' }) //实例 var vm2 = new Vue({ el : '#app2', data :{ comName : 'login',//当前 component 中的 :is 帮i的那个的组件的名称 }, methods:{}, });</script></body></html>
这种方式可以实现定义多个组件切换,需要注意的是,组件名称要对应
相关文章推荐:
以上就是Vue实现组件切换的两种方式介绍(附代码)的详细内容,更多请关注其它相关文章!