Vue常见的实现tab切换的两种方法

目录

方法一:事件绑定+属性绑定

效果图

 完整代码

方法二:属性绑定+ 动态组件 component标签

效果图

完整代码 


方法一:事件绑定+属性绑定

效果图

Vue常见的实现tab切换的两种方法_第1张图片

 完整代码




    
    
    tab
    


    
1 2 3 4 5

1

2

3

4

5

方法二:属性绑定+ 动态组件 component标签

            该组件具有一个is属性,is属性的值 是 要渲染组件的名字,即为is属性的值是哪一个组件名,

            component 标签就会渲染哪一个组件

            缺点:component 可以动态渲染组件的内容,但是每一个切换,都会重新渲染组件内容,降低渲染效率

            使用keep-alive 标签(组件),可以缓存曾经渲染过的组件,从而提高渲染效率

效果图

Vue常见的实现tab切换的两种方法_第2张图片

完整代码 




    
    
    动态组件
    


    
水浒传 红楼梦 西游记 三国演义

你可能感兴趣的:(Vue,vue.js,javascript,前端)