Vue 实现简易tab切换效果

实现思路:

1.点击上方的标题,下方的内容随之发生改变;
2.上方和下方用的是两个块,是兄弟节点,所以需要点击tab标题和下方内容一一对应;
3.基于两个模块若下标相同是一个内容实现的。

  • HTML结构
    
  • 标题一
  • 标题二
  • 标题三
  • 标题四
内容一
内容二
内容三
内容四
  • CSS样式
    
  • 引入Vue实现

    
  • 标题一
  • 标题二
  • 标题三
  • 标题四
内容一
内容二
内容三
内容四
  • 实现效果:
    Vue 实现简易tab切换效果_第1张图片
  • 优化Vue实现

  • {{title}}
{{m}}
  • 实现效果:
    Vue 实现简易tab切换效果_第2张图片

你可能感兴趣的:(Vue 实现简易tab切换效果)