Vue入门到放弃21(组件-切换案例)

Vue入门到放弃21(组件-切换案例)_第1张图片

 

一、通过v-if控制实现

  首先我们通过前面介绍的v-if标签来实现下这种效果

1.创建组件

  创建我们需要的两个全局组件,并通过标签使用。


    
    


二、通过component标签来实现

  除了上面介绍的这种方式以外我们还可以通过Vue组件中给我们提供的一个component标签来实现

Vue提供了 component 来展示对应名称的组件,component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称


  
  

效果:

Vue入门到放弃21(组件-切换案例)_第2张图片

组件切换-添加动画

Vue入门到放弃21(组件-切换案例)_第3张图片

效果:(存在bug)

Vue入门到放弃21(组件-切换案例)_第4张图片

我们发现动画切换的时候两个是一块执行的,这时我们可以在 transition 标签添加一个 mode属性 来设置动画的模式

Vue入门到放弃21(组件-切换案例)_第5张图片

效果:

Vue入门到放弃21(组件-切换案例)_第6张图片

你可能感兴趣的:(vue,Vue入门到放弃)