现在有这么需求,看效果图,大家都秒懂!

代码如下:

<template>
    <div>
         <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted myca">
    <div class="mui-scroll">
        <a :class="['mui-control-item',{'mui-active':index==item.id||index==0}]" v-for="(item,index) in tabarList" :key="item.id">
            {{item.name}}
        </a>
    </div>
</div>   
    </div>
</template>
复制代码

tabarList是ajax返回过来的数组,然后绑定到data的tabarList里面,然后需要绑定key,如果是渲染展示,不操作的列表是不需要key的,添加,删除等操作都需要绑定key,养成好习惯,还是加上key吧,这边key绑定的ajax的id值,然后重头戏来了! 因为mui-control-item是不变的,mui-active是变的,所以这边采用数组格式包对象,数组方括号[],对象花括号{}. 然后我们在 {'mui-active':index==item.id||index==0}],这边判断的条件是当前点击的index和后台的id 是否相等,但是还没完,因为我们要页面一加载,就要给第一个div儿子绑定上active,所以这边弄个||让index为0,这边我是考感觉的,自己瞎搞的,就出来了.....

如果做得不对,请指教,我也是个垃圾新手,加油吧!