本文共 1425 字，大约阅读时间需要 4 分钟。

Vue实现选项卡功能

select.vue组件

<template>  <div class="select">    <!-- 按钮 -->    <div class="btn">      <span        v-for="item in 4"        :class="{active:item===idx}"        @click="selectState(item)"        :key="item"      >图片{   {   item}}</span>    </div>    <!-- 图片区域 -->    <div class="imgBox">      <img v-for="(item,index) in imgs" :style="{display:idx===index+1?'block':'none'}"  :key="item" :src="item" alt />    </div>  </div></template><script>export default {     props: {       //图片    images: {         type: Array,      default() {           return [          require("../assets/img1.jpg"),          require("../assets/img2.jpg"),          require("../assets/img3.jpg"),          require("../assets/img4.jpg")        ];      }    }  },  data() {       return {         //选中的索引      idx: 1,      //相应的图片      imgs: []    };  },  created() {       this.imgs = this.images;  },  methods: {       //改变选中状态    selectState(item) {         this.idx = item;    }  }};</script><style scoped>/* 按钮 */.select .btn {     display: flex;}.select .btn span {     width: 25%;  height: 1.333333rem;  background-color: azure;  text-align: center;  line-height: 1.333333rem;  font-size: 0.426667rem;}.select .btn .active {     background-color: chocolate;}/* 图片 */.select .imgBox{       height: 12.666667rem;}.select .imgBox img{       width: 100%;    height: 100%;}</style>

具体看githup链接：
https://github.com/await-lfq/vuePlugin.git