使用vue制作一个简单的tabs标签页组件

<template>
  <div id="text_property">
    <div class="tabBar">
      <div style="display: flex;justify-content: center;">
        <span
          v-for="item in items"
          :key="item.value"
          style="height:120px;width:100px;display:inline-block;"
        >
          <label
            class="tabBar_label"
            :style="item.value===selTab?'height: 40px;width: 70px;background:#6666ff;':'height: 40px;width: 70px;background:#cc3399;'"
            ><input
              :value="item.value"
              type="radio"
              name="tabs"
              @click="tabClick"
            />{{ item.title }}</label
          >
          <span
            style="height:1px;width:100px;display:inline-block;background:red;"
          ></span>
        </span>
      </div>
    </div>
    <div v-for="(tabItem,idx) in items" :key="tabItem[idx]">
        <div v-if="tabItem.value===selTab">{{tabItem.content}}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selTab: 'a',
      items: [
        { value: "a", title: "tab1", content: "1111" },
        { value: "b", title: "tab2", content: "2222" },
        { value: "c", title: "tab3", content: "333" }
      ]
    };
  },
  created() {},
  mounted() {},
  onEvents: {},
  computed: {},
  watch: {},
  methods: {
    tabClick(e) {
      this.selTab = e.target.value;
    }
  }
};
</script>
<style lang="scss" scoped>
#text_property{
  height: 300px;
  width: 300px;
  border: 1px solid rgb(93, 150, 235);
}
.tabBar input[type="radio"] {
  display: none;
}
.tabBar_label {
  display: inline-block;
  border: 1px solid fuchsia;
}
</style>