vue页面实现tab切换并渲染两种状态时的图片

最新推荐文章于 2023-07-06 14:38:37 发布

小小小菜鸟1997

最新推荐文章于 2023-07-06 14:38:37 发布

阅读量451

点赞数 1

本文链接：https://blog.csdn.net/HuLuWa1997/article/details/119424414

版权

这篇博客详细介绍了如何使用Vue.js实现页面上的Tab切换功能，并在不同状态下动态渲染对应的图片。通过HTML布局，结合数据绑定和CSS样式，实现了切换效果。文中还提供了具体的方法步骤和最终展示的效果。

摘要由CSDN通过智能技术生成

html代码：

  <ul class="dataCon_tab">
      <li
        v-for="(item, index) in tabList"
        :key="index"
        :class="tabCurrentIndex === index ? 'active' : ''"
        @click="tabOnClickTab(index)"
      >
        <img
          :src="tabCurrentIndex === index ? item.iconUrl : item.iconActiveurl"
        >
        <span>{
   {
    item.name }}</span>
      <