vue 实现自定义的tab选项卡

最新推荐文章于 2024-07-25 09:36:58 发布

小刘先生很努力

最新推荐文章于 2024-07-25 09:36:58 发布

阅读量517

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lzfengquan/article/details/128377901

版权

在这里插入图片描述
看图可知。当我们选择分类的时候，可以动态的切换，展示不同的内容。
简单示例：

初始化时定义一个初始值 vue2是在data里面 vue3是在setup里面。
let typetest = ref(0);

颜色分类:
  <div class="parent">
    <div
      v-for="(item, i) in 4"
      :key="i"
      :class="['test', typetest === i ? 'active' : '']"
      @click="testHadle(i)"
    >
      1
    </div>
  </div>
  
  事件
  const testHadle = (i) => {
	  typetest.value = i;
  };

在这里插入图片描述

样式：
.parent {
  display: flex;
  justify-content: space-between;
}
.test {
  width: 100px;
  height: 50px;
  border: 1px solid red;
}
.active {
  width: 100px;
  height: 50px;
  border: 1px solid blue;
}