点击页面切换

最新推荐文章于 2024-07-08 18:51:22 发布

周小航.

最新推荐文章于 2024-07-08 18:51:22 发布

阅读量461

点赞数 10

文章标签：前端 java javascript

本文链接：https://blog.csdn.net/weixin_64103049/article/details/135848153

版权

本文描述了如何在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> -->