使用vue写一个tab切换

Answer 1

v-for循环，利用下标和v-show显示

`<div id="app">
    <ul class="tabs">
        <li class="li-tab" v-for="(item,index) in tabsParam" 
        @click="toggleTabs(index)" 
        :class="index===nowIndex?'active':''">{{item}}</li>
    </ul>
    <div class="divTab" v-show="nowIndex===0">我是tab1</div>
    <div class="divTab" v-show="nowIndex===1">我是tab2</div>
    <div class="divTab" v-show="nowIndex===2">我是tab3</div>
    <div class="divTab" v-show="nowIndex===3">我是tab4</div>
</div>`

Answer 2

<template>
  <div class="tab-wrap">
    <div class="tabs">
      <button
        v-for="i in list"
        :key="i.id"
        @click="choose = i.id"
      >{{i.title}}</button>
    </div>
    <div class="content">{{list[choose].content}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {id: 0, title: 'A', content: 'aaaaaaaaaaaaaa'},
        {id: 1, title: 'B', content: 'bbbbbbbbbbbbbb'},
        {id: 2, title: 'C', content: 'cccccccccccccc'}
      ],
      choose: 0
    }
  }
}
</script>