vue实现简单选项卡

标签: 笔记  vue

vue简单实现选项卡

Html

 <div class="list" v-for="(item,index) in list" :key="index" :class="{active:index === con}" @click="tab(index)">{{item.name}}</div>
      <div class="content" v-show="con === 0">1</div>
      <div class="content" v-show="con === 1">2</div>
      <div class="content" v-show="con === 2">3</div>

script

 data() {
    return {
      list:[
           {name:'选项卡1'},
           {name:'选项卡2'},
           {name:'选项卡3'},
        ],
        con:0,
      }
  },
  methods: {
    tab(index){
          this.con =index
    }
    },

css

.list{
  display: inline-block;
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: yellow;
  border: 1px solid yellow;
}
.active{
  color: green;
  border: 1px solid green;
}
.content{
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

效果
在这里插入图片描述

版权声明:本文为macangyewangs原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/macangyewangs/article/details/106208790