vue中tab栏切换

最新推荐文章于 2025-06-13 11:04:32 发布

chengxue_123

最新推荐文章于 2025-06-13 11:04:32 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/chengxue_123/article/details/109790869

vue 专栏收录该内容

25 篇文章

订阅专栏

博客介绍了Vue中绑定类名的方法，即 :class 绑定布尔类型属性。还给出了CSS样式示例。同时分享了项目中Tab栏切换文章详情的代码，包括Tab栏代码、文章详情页对应、引入接口、主要方法等，以及详情页跳转和显示的相关内容，还提到了CSS样式引入问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.绑定类名 :class="{'属性名:后面为布尔类型,true为生效'}"

2.定义

3)在css中样式

.active {

font-size: 18px;

color: #2878ff;

}

扩展知识,在我做的项目中:关于tab栏切换文章详情代码

1.tab栏代码

 <div class="menu">
        <!-- 比较成熟的tab栏切换 -->
        <ul>
          <li :class="{ active: isActive === -1 }" @click="changeClass(-1)">
            推荐
          </li>
          <li
            :class="{ active: isActive == index }"
            v-for="(item, index) in artList"
            :key="index"
            @click="changeClass(index, item)"
          >
            {{ item.className }}
          </li>
        </ul>
      </div>

2.文章详情页对应

  <div class="artical">
      <el-card class="item" v-for="(item, index) in articalList" :key="index">
        <div class="title">
          <el-avatar size="small" :src="item.avatar"></el-avatar>
          <span>{{ item.username }}</span>
          <span>{{ item.updateTime | formatTime }}</span>
          <h5>
            <router-link :to="'/detail/' + item.articalId">{{
              item.articalName
            }}</router-link>
          </h5>
        </div>

3.引入方法接口定义变量

4.主要方法

  created() {
    this.initClassify();
    this.initArtical();
  },
  methods: {
     changeClass(index, item) {
      this.currentPage = 1;
      this.isActive = index;
      if (item) {
        this.classId = item.classId;
      } else {
        this.classId = null;
      }
      this.initArtical();
    },
    initClassify() {
      getAllClassify().then((res) => {
        if (res.code == 200) {
          // console.log(res);
          this.artList = res.data;
        }
      });
    },
    initArtical() {
      var params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        classId: this.classId,
      };
      getArticals(params).then((res) => {
        if (res.code == 200) {
          // console.log(res);
          this.articalList = res.data;
        }
      });
    },
//.....
}

5.对tab栏内容详情的跳转和显示更多需要在路由里面配id

   <router-link :to="'/detail/' + item.articalId">{{
              item.articalName
   }}</router-link>

加载更多

async more() {
      //加载更多
      this.currentPage++;
      var params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        classId: this.classId,
      };
      var res = await getArticals(params);
      console.log(res);

      if (res.code == 200) {
        res.data.forEach((item, index, array) => {
          this.articalList.push(item);
        });
      } else {
        console.log("没有更多了");
      }
    },
    // more() {
    //   //用上述more方法比较好用,这个用起来还是有点问题的
    //   this.currentPage++;
    //   var aData = JSON.parse(JSON.stringify(this.articalList));
    //   var params = {
    //     currentPage: this.currentPage,
    //     pageSize: this.pageSize,
    //     classId: this.classId,
    //   };
    //   getArticals(params).then((res) => {
    //     console.log(res);
    //     res.data.forEach(function (item, index) {
    //       aData.push(item);
    //     });
    //     this.articalList = aData;
    //   });
    // },

6.详情页的跳转