用vue实现tab栏切换

最新推荐文章于 2024-04-21 21:55:54 发布

香香爱编程

最新推荐文章于 2024-04-21 21:55:54 发布

阅读量99

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/2302_79245293/article/details/134968730

版权

样式：

 <style>
      ul {
        display: flex;
        margin: 0;
        padding: 0;
      }
      .item {
        list-style: none;
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: lightgreen;
      }

      li.active {
        background-color: red;
      }

      .content {
        width: 300px;
        height: 300px;
        background-color: skyblue;
        display: none;
      }

      div.active {
        display: block;
      }
    </style>

准备dom

  <!-- 2 准备dom -->
    <div id="app">
      <ul>
        <li
          v-for="(item, index) in tabs"
          :key="item.id"
          class="item"
          :class="{active:  index ===  idx}"
          @click="idx = index"
        >
          {{ item.menu }}
        </li>
      </ul>
      <div>
        <div
          v-for="(item,index) in tabs"
          :key="item.id"
          class="content"
          :class="{active: index === idx}"
        >
          {{ item.content}}
        </div>
      </div>
    </div>

创建vue实例

 <!-- 1 引入Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    // 3 创建vue实例
    new Vue({
      // 元素
      el: '#app',
      // 数据
      data: {
        idx: 0, // 当前激活的li
        tabs: [
          {
            id: 1,
            menu: 'HTML',
            content: 'html5',
          },
          {
            id: 2,
            menu: 'CSS',
            content: 'css3',
          },
          {
            id: 3,
            menu: 'JS',
            content: 'es6',
          },
        ],
      },
    })
  </script>

效果：