38. Vue组件切换 使用v-if、v-else结合flag进行切换

2020-06-23 16:45:16 浏览数 (2)

需求

在登陆页面的需求中,一般都会有登陆、注册两个按钮,然后点击不同的按钮显示不同的页面。在这里对应的页面可以是一个组件。

那么通过点击不同的按钮,切换不同的组件页面。

下面使用v-ifv-else结合flag来实现这个页面的切换需求。

示例

1.首先创建两个全局组件,作为切换的页面

image-20200207152410264

2.设置切换按钮,以及应用两个组件

image-20200207152448744

3.给不同的按钮设置click改变flag的值,通过v-ifv-false结合flag来进行组件切换

image-20200207152617838

4.查看浏览器显示

image-20200207152642423

image-20200207152655264

点击登陆或者注册,切换不同的组件。

那么看到这里,应该就会带来一个疑问,就是v-ifv-else之间是不是就是靠flag作为组合联系的呢。

如果在现在的基础上,在写一个组件3、组件4,用另一个flag2来控制新的切换,是否可以的?

5.编写新的组件3、组件4以及定义flag2参数

image-20200207153140841

6.给组件3、组件4设置按钮进行切换

image-20200207153600478

7.确认两台组件之间是否会相互影响

image-20200207155337221

完整示例代码

代码语言:javascript复制
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--  导入vue.js库  -->
        <script src="lib/vue.js"></script>

    </head>
    <body>

        <div id="app1">

            <a href="" @click.prevent="flag=true">登陆</a>
            <a href="" @click.prevent="flag=false">注册</a>

            <!-- 登陆组件 -->
            <login v-if="flag"></login>

            <!-- 注册组件 -->
            <register v-else="flag"></register>

            <hr>

            <a href="" @click.prevent="flag2=true">组件3</a>
            <a href="" @click.prevent="flag2=false">组件4</a>

            <!-- 组件3 -->
            <my-com3 v-if="flag2"></my-com3>

            <!-- 组件4 -->
            <my-com4 v-else="flag2"></my-com4>

        </div>

        <script>        
            // 创建登陆组件
            Vue.component('login',{
                template:'<h1>登陆组件</h1>'
            })

            // 创建注册组件
            Vue.component('register',{
                template:'<h1>注册组件</h1>'
            })

            // 创建组件3
            Vue.component('my-com3',{
                template:'<h1>组件3</h1>'
            })

            // 创建组件4
            Vue.component('my-com4',{
                template:'<h1>组件4</h1>'
            })

            // 创建第一个Vue的实例
            var vm1 = new Vue({
                el: '#app1',
                data: {
                    flag: true,
                    flag2: true,
                },
            })

        </script>

    </body>
</html>

0 人点赞