点击页面切换

本文描述了如何在Vue.js应用中,使用条件渲染(v-if)代替传统的tab切换逻辑,以提高代码效率并减少DOM操作。作者给出了使用`v-if`实现不同组件根据`activeIndex`显示或隐藏的例子。
摘要由CSDN通过智能技术生成

如果是页面切换不是tab拦切换的话,可以这样写:

 

 <div
        :class="['herd_item', { active: activeIndex === index }]"
        v-for="(item, index) in headerList"
        @click="handleTabToggle(index, item)"
        :key="index"
      >
        {{ item.txt }}
      </div>


<component :is="activeComponent"></component>


 //数据
      activeIndex: 0,
      activeComponent: VRAR,
      headerList: [
        { txt: "VR/AR测试", comp: VRAR },
        { txt: "运动控制", comp: MotionControl },
        { txt: "产线检测", comp: DetecTion },
        { txt: "帮助", comp: Assist },
      ],

// 处理tab切换
    handleTabToggle(index, item) {
      this.activeIndex = index;
      this.activeComponent = item.comp;
    },

就不用这种老办法了,用if套用判断

 <!-- VRAR -->
    <!-- <VRAR v-if="activeIndex == 0"></VRAR> -->
    <!-- 运动控制 -->
    <!-- <MotionControl v-if="activeIndex == 1"></MotionControl> -->
    <!--  产线检测-->
    <!-- <DetecTion v-if="activeIndex == 2"></DetecTion> -->
    <!-- 帮助 -->
    <!-- <Assist v-if="activeIndex == 3"></Assist> -->

  • 10
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值