vue 手写选项卡切换 :class="{'active' : curTop == index}"

效果如下：

 

 

 

 

 

 

 

 

 

 

代码如下：

<div class="flex">
    <p :class="{'active' : curTop == index}" class="tc text-18 hover-pointer"
      v-for="(item, index) in topTab" :key="index" @click="topTapChange(index)">{{item}}</p>
</div>

 

data:

 curTop: 0,
      topTab: ["新闻动态", "通知公告"],
      newsArr: [
        { title: '专题：学习宣传贯彻党的十九届六中全会精神', time: '2021-11-09' },
        { title: '专题：学习宣传贯彻党的十九届六中全会精神', time: '2021-11-09' },
        { title: '专题：学习宣传贯彻党的十九届六中全会精神', time: '2021-11-09' },
        { title: '专题：学习宣传贯彻党的十九届六中全会精神', time: '2021-11-09' },
        { title: '专题：学习宣传贯彻党的十九届六中全会精神', time: '2021-11-09' },
        { title: '专题：学习宣传贯彻党的十九届六中全会精神', time: '2021-11-09' },
      ],
      noticeArr: [
        { title: '专题：学习宣传贯彻党的十九届六中全会精神', time: '2021-11-09' },
        { title: '专题：学习宣传贯彻党的十九届六中全会精神', time: '2021-11-09' },
      ],

 

 

methods:

 // 选项卡切换
    topTapChange(index) {
      this.curTop = index;
      index == 0
        ? (this.listData = this.newsArr)
        : (this.listData = this.noticeArr);
    },

 

 

 

 

 

作者：微微一笑绝绝子
出处：https://www.cnblogs.com/wwyxjjz/p/15936087.html
本博客文章均为作者原创，转载请注明作者和原文链接。