vue循环tab切换，当前选中的问题？

Question

循环，牵扯到一个当前选中的class：active，如何处理它，求解！

html：

<div id="header" class="swiper-container-horizontal swiper-container-free-mode">
                  <div class="swiper-wrapper buttons-tab" id="classifyNm" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
                    <div class="swiper-slide">
                      <a href="#tab1" class="tab-link active button">电脑</a>
                    </div>
                    <div class="swiper-slide">
                      <a href="#tab2" class="tab-link button">手机</a>
                    </div>
                    <div class="swiper-slide">
                      <a href="#tab3" class="tab-link button">衣服</a>
                    </div>
                    <div class="swiper-slide">
                      <a href="#tab4" class="tab-link button">手机</a>
                    </div>
                    <div class="swiper-slide">
                      <a href="#tab5" class="tab-link button">衣服</a>
                    </div>
                    <div class="swiper-slide">
                      <a href="#tab6" class="tab-link button">手机</a>
                    </div>
                    <div class="swiper-slide">
                      <a href="#tab7" class="tab-link button">衣服</a>
                    </div>
                    <div class="swiper-slide">
                      <a href="#tab8" class="tab-link button">手机</a>
                    </div>
                    <div class="swiper-slide">
                      <a href="#tab9" class="tab-link button">衣服</a>
                    </div>
                    <div class="swiper-slide">
                      <a href="#tab10" class="tab-link button">衣服</a>
                    </div>
                  </div>
                </div>

                <div class="content-block">

                  <div class="tabs">

                    <div id="tab1" class="tab active">
                      <div class="content-block">
                        <p>This is tab 1 content</p>
                      </div>
                    </div>

                    <div id="tab2" class="tab">
                      <div class="content-block">
                        <p>This is tab 2 content</p>
                      </div>
                    </div>

                    <div id="tab3" class="tab">
                      <div class="content-block">
                        <p>This is tab 3 content</p>
                      </div>
                    </div>

                    <div id="tab4" class="tab">
                      <div class="content-block">
                        <p>This is tab 4 content</p>
                      </div>
                    </div>
                    
                    <div id="tab5" class="tab">
                      <div class="content-block">
                        <p>This is tab 5 content</p>
                      </div>
                    </div>

                    <div id="tab6" class="tab">
                      <div class="content-block">
                        <p>This is tab 6 content</p>
                      </div>
                    </div>

                    <div id="tab7" class="tab">
                      <div class="content-block">
                        <p>This is tab 7 content</p>
                      </div>
                    </div>

                    <div id="tab8" class="tab">
                      <div class="content-block">
                        <p>This is tab 8 content</p>
                      </div>
                    </div>

                    <div id="tab9" class="tab">
                      <div class="content-block">
                        <p>This is tab 9 content</p>
                      </div>
                    </div>

                    <div id="tab10" class="tab">
                      <div class="content-block">
                        <p>This is tab 10 content</p>
                      </div>
                    </div>

                  </div>

                </div>

js：

var classifyName = new Vue({
    el:'#classifyNm',
    data:{
        beans:[
            {name:'电脑'},
            {name:'手机'},
            {name:'衣服'},
            {name:'手机'},
            {name:'衣服'},
            {name:'手机'},
            {name:'衣服'},
            {name:'手机'},
            {name:'衣服'},
            {name:'手机'},
            {name:'衣服'},
            {name:'手机'},
            {name:'衣服'},
            {name:'手机'},
            {name:'衣服'}
        ]
    }
});

Answer 1

js

var classifyName = new Vue({
    el:'#classifyNm',
    data:{
        active:'',
        beans:[
            {name:'电脑'},
            {name:'手机'},
            {name:'衣服'},
            {name:'手机'},
            {name:'衣服'},
            {name:'手机'},
            {name:'衣服'},
            {name:'手机'},
            {name:'衣服'},
            {name:'手机'},
            {name:'衣服'},
            {name:'手机'},
            {name:'衣服'},
            {name:'手机'},
            {name:'衣服'}
        ]
    }
});

html

 <div class="swiper-wrapper buttons-tab" id="classifyNm" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
                    <div class="swiper-slide" v-for="(t,index) in beans">
                      <a href="#tab+(index+1)" class="tab-link active button" @click="active=t.name" :class="{active:active=t.name}" >t.name</a>
                    </div>
                </div>

上述代码实现效果是实现列表循环，从你的列表中循环东西出来。然后在data里添加一个索引，当你点击该元素时，使索引等于你当前元素的名字，从而起到判断，将你所点击的元素添加上active的class。a的href可能还需调整~希望对你有帮助

Answer 2

data中设置一个tabindex:0
循环的时候判断索引值是否相等

 <div class="swiper-slide" @click="selectTab(index)" v-for="(tab,index) in beans">
   <a href="#tab1" :class="[tabindex==index ? active : '', tab-link button]">{{tab}}</a>
 </div>

js中方法

selectTab(index){
   this.tabindex = index;
 },

Answer 3

。。。很常见吧，完全可以在beans的对象数组上某个对象加一个字段比如active。然后渲染时候判断一下添加class咯。

beans:[
    {name:'电脑', active: true},
    {name:'手机'},
    {name:'衣服'},
    {name:'手机'},
    {name:'衣服'},
    {name:'手机'},
    {name:'衣服'},
    {name:'手机'},
    {name:'衣服'},
    {name:'手机'},
    {name:'衣服'},
    {name:'手机'},
    {name:'衣服'},
    {name:'手机'},
    {name:'衣服'}
]

Answer 4

你都没有进行遍历 怎么去做其他事情

Answer 5

首先你要用v-for遍历渲染dom吧
给beans数组中每个对象加入一个current属性 然后点击的时候遍历数组，把其他项设为false，把这一项的current设为true 然后bind一个class