欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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>

运行结果:点击登录或注册 进入相应的组件模块

Vue实现组件切换的两种方式介绍(附代码)

Vue实现组件切换的两种方式介绍(附代码)

注意:使用 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>

这种方式可以实现定义多个组件切换,需要注意的是,组件名称要对应

相关文章推荐:

node服务器如何实现豆瓣数据的获取(代码)

vue实现仿今日头条首页选项卡的功能

以上就是Vue实现组件切换的两种方式介绍(附代码)的详细内容,更多请关注其它相关文章!

相关标签: Vue组件切换