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

需求

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

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

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

示例

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

image-20200207152410264

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

image-20200207152448744

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

image-20200207152617838

4.查看浏览器显示

image-20200207152642423

image-20200207152655264

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

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

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

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

image-20200207153140841

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

image-20200207153600478

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

image-20200207155337221

完整示例代码

    
        
        
        
        

    
    

        


            登陆
            注册

            
            

            
            

            


            组件3
            组件4

            
            

            
            

        

        

    

更多精彩原创Devops文章，快来关注我的Devops社群吧：