第六章 自定义组件

1-1 tab切换

<template>
  <div>
    <div>
      <div class="tabs-box">
        <div
          @click="handleItem(index)"
          v-for="(item, index) of items"
          :key="index"
          :class="['tabs-item', currentIndex == index ? 'selected' : '']"
        >
          {{ item }}
        </div>
      </div>
      <div class="product-detail-box">
        <div v-show="currentIndex==0">detail</div>
        <div v-show="currentIndex==1">param</div>
        <div v-show="currentIndex==2">sale</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: ["选项一", "选项二", "选项三"],
      currentIndex: 0,
    };
  },
  methods: {
    handleItem(index) {
      this.currentIndex = index;
    },
  },
};
</script>
<style scoped>
.selected {
  color: rgba(171, 149, 109, 0.8);
  border-bottom: 2px solid rgba(171, 149, 109, 0.8);
}
.tabs-box {
  display: flex;
  height: 50rpx;
}
.tabs-item {
  flex: 1;
  text-align: center;
}
</style>