vue选项卡 ,循环数据点击改变class,并初始循环中的第一个为选中状态class

html:

<li
         v-for="(skill,ss) in skills"
         :key="skill.ss"
         @click="changeSkills(ss)"
         :class="ss == index? 'active': ''"
         >
            <span>{{skill.name}}</span>
 </li>                
  • ss为skill的索引
  • index初始定义为0,:class让循环的第一个为选中状态
  • @click="changeSkills(ss)"  带着ss的点击事件

注:要用循环中的索引,点击事件中的索引每点击前虽然遍历了,但是没有使用。

js:

export default {
        data() {
                return {
                        index: 0,
                            }
                   }
                 }
changeSkills(ss) {
                        this.index = ss;
                },
  • changeSkills(ss)中的 ss 要和下面 this.index = ss 中的 ss 名称一样。表示获取的点击事件的索引。

其他:点击切换

 v-if="index== 1"

 

posted @ 2021-01-25 17:57  现实里的乌托邦  阅读(502)  评论(0编辑  收藏  举报