Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

maozhuo123

maozhuo123 commented on Jul 3, 2019

@maozhuo123

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

HeMin0919

HeMin0919 commented on Jul 24, 2019

@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

zhengwei1949 commented on Sep 27, 2019

@zhengwei1949

作用域 插槽+子组件

canwdev

canwdev commented on Mar 18, 2020

@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

Guokaiming commented on May 25, 2020

@Guokaiming

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

Youth-spirit

Youth-spirit commented on Apr 26, 2022

@Youth-spirit

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

{{itemCon}}

const vm=new Vue({
el:'#app',
data(){
return{
tdata:['栏目一','栏目二','栏目三'],
tcdata:['一','二','三'],
num:0
},
methods:{
handoff(index){
this.num=index
}
}
}
})

2860754963

2860754963 commented on Jan 10, 2023

@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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@canwdev@Guokaiming@maozhuo123@zhengwei1949

        Issue actions

          [vue] 使用vue写一个tab切换 · Issue #453 · haizlin/fe-interview