vue实现tab切换功能

vue实现tab选项卡功能

效果图

  <div class="study-title">
          <button @click="study1">寓教于乐</button>
          <button @click="study2">寓教于学</button>
          <button @click="study3">学以致用</button>
          <button @click="study4">勤学动脑</button>
        </div>
        <div class="study-content">
            <!-- 利用v-show来控制显示隐藏 -->
          <div
            class="study-item"
            v-show="imgs == 1"
          ></div>
          <div
            class="study-item2"
            v-show="imgs == 2"
          ></div>
          <div
            class="study-item3"
            v-show="imgs == 3"
          ></div>
          <div
            class="study-item4"
            v-show="imgs == 4"
          ></div>
</div>

data(){
    return{
        imgs : 1
}
},
methods:{
     study1() {
      this.imgs = 1;
    },
    study2() {
      this.imgs = 2;
    },
    study3() {
      this.imgs = 3;
    },
    study4() {
      this.imgs = 4;
    },
}

.study-title {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.study-title button {
  width: 210px;
  height: 70px;
  color: #fff;
  border: none;
  background: rgb(255, 150, 0);
  cursor: pointer;
  border-radius: 40px;
  font-size: 32px;
  line-height: 70px;
  box-shadow: 2px 2px 10px rgb(175, 175, 175);
}
.study-item,
.study-item2,
.study-item3,
.study-item4 {
  width: 1400px;
  height: 468px;
  margin: 0 auto;
  background-repeat: no-repeat;
  margin-top: 20px;
}
.study-item4 {
  background: url("../assets/1.png");
}
.study-item {
  background: url("../assets/2.png");
}
.study-item2 {
  background: url("../assets/3.png");
}
.study-item3 {
  background: url("../assets/4.png");
}