[vue] 使用vue写一个tab切换

[haizhilin2013]

[vue] 使用vue写一个tab切换

[maozhuo123]

v-for循环list，根据索引值设置active的样式和显示内容

[HeMin0919]

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>`

[zhengwei1949]

作用域 插槽+子组件

[canwdev]

<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>

[Guokaiming]

你们是怎么做到大部分的人的写法都相同的- -

[Youth-spirit]

v-for循环数据在使用动态绑定类

<div v-for=(itemContent,index) in tcdata :key=index v-show=index==num

{{itemCon}}

[2860754963]

<template>
  <div>
    <button v-for="obj in list" :key="obj.id" @click="choose = obj.id">
      {{ obj.title }}
    </button>
    <div>{{ list[choose].content }}</div>
  </div>
</template>
script>
export default {
  name: 'diG',
  data() {
    return {
      list: [
        { id: 0, title: 'A', content: 'aaaaaaaaaaaaaa' },
        { id: 1, title: 'B', content: 'bbbbbbbbbbbbbb' },
        { id: 2, title: 'C', content: 'cccccccccccccc' },
      ],
      choose: 0,
    }
  },
}
</script>