Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
haizhilin2013 opened this issue Jun 22, 2019 · 7 comments
Open

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

haizhilin2013 opened this issue Jun 22, 2019 · 7 comments
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the vue vue label Jun 22, 2019
@maozhuo123
Copy link

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

@HeMin0919
Copy link

HeMin0919 commented Jul 24, 2019

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

作用域 插槽+子组件

@canwdev
Copy link

canwdev commented Mar 18, 2020

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

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

@Youth-spirit
Copy link

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

{{itemCon}}

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

@2860754963
Copy link

<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
Labels
vue vue
Projects
None yet
Development

No branches or pull requests

8 participants