Vue实现简单的Tab栏切换

最新推荐文章于 2024-07-17 11:58:23 发布

雷加祥

最新推荐文章于 2024-07-17 11:58:23 发布

阅读量1.8k

点赞数 2

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/m0_37408390/article/details/106153048

版权

VUE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

v-on:click=‘handle(index)’ 点击事件实现切换功能并且传参
v-bind:class='currentIndex==index?“active”:""'利用三目运算符判断生命的currentIndex是否等于index 如果等于就给li标签添加active样式如果不等于则为空

 <div id="app">
    <div class="tab">
      <ul>
        <li v-on:click='handle(index)' v-bind:class='currentIndex==index?"active":""' v-bind:key='item.id'  v-for='(item,index) in list'>{{item.title}}</li>
      </ul>
      <div v-for='(item,index) in list' v-bind:class='currentIndex==index?"current":""' >
        <img  :key='item.id' :src="item.path" alt="">
      </div>
    </div>
  </div>

 var vm = new Vue({
      el: '#app',
      data: {
        currentIndex:0,
        list: [{
          id:1,
          title: 'apple',
          path: 'images/apple.jpg'
        }, {
          id:2,
          title: 'orange',
          path: 'images/orange.jpg'
        }, {
          id:3,
          title: 'lemon',
          path: 'images/lemon.jpg'
        }]
      },
      methods: {
        handle:function(index){
          // 在这里实现选项卡的切换操作：本质就是通过currentIndex判断等于哪个index操作类名
          // index上面触发函数时传过来
          this.currentIndex=index;
        }
      }
    });

 img {
      width: 100%;
      height: 100%;
    }

    .tab ul {
      overflow: hidden;
      padding: 0;
      margin: 0;
    }

    .tab ul li {
      box-sizing: border-box;
      padding: 0;
      float: left;
      width: 100px;
      height: 45px;
      line-height: 45px;
      list-style: none;
      text-align: center;
      border-top: 1px solid blue;
      border-right: 1px solid blue;
      cursor: pointer;
    }

    .tab ul li:first-child {
      border-left: 1px solid blue;
    }

    .tab ul li.active {
      background-color: orange;
    }

    .tab div {
      width: 298px;
      height: 298px;
      display: none;
      text-align: center;
      font-size: 30px;
      line-height: 300px;
      border: 1px solid blue;
      border-top: 0px;
    }

    .tab div.current {
      display: block;
    }