使用VUE制作简易选项卡

html

<div class="box">
      <button v-for="(item,index) in btnTitle" :key="index" :class="index==num?'btn':''"  @click="fun(index)">{{item}}</button>
      <div v-for="(item,index) in divTitle" :key="index" v-show="index == num">{{item}}</div>
  </div>

js

<script>
export default {
  name:"HelloWorld",
  data() {
    return {   
      btnTitle:['按钮一',"按钮二","按钮三"],
      divTitle:["内容一","内容二","内容三"],
      num:0
    }
  },
  methods: {
    fun(index){
      this.num = index
    }
  },
}
</script>

css

.box .btn{
    background: red;
  }
  .box div{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
  }