Vue ——tab切换样式

最新推荐文章于 2025-05-31 20:13:02 发布

原创最新推荐文章于 2025-05-31 20:13:02 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

这是一个使用Vue.js编写的登录页面组件，通过v-for遍历items数组，展示不同的登录方式选项，如密码登录、企业微信等。点击不同选项时，通过tabName方法更新当前选中的登录方式。样式部分使用了less进行美化，包括tab项的激活状态和边框样式。

在这里插入图片描述
login.vue

<div :class="[ tab === item.tab ? 'tab_item active' : 'tab_item']" @click="tabName(item.tab)" v-for="item in items" :key="item.tab">
   {{ item.tab }}
</div>

<script>
export default {
  name: "login",
  data() {
    return {
      tab:"密码登录" ,
      items: [
        { tab: "密码登录"},
        { tab: "企业微信"},
        { tab: "钉钉登录"},
        { tab: "动态口令"},
        { tab: "统一身份认证"},
        { tab: "微信登录"}
      ],
    };
  },
  methods:{
    tabName:function(curTab){
      this.tab = curTab;
    }
  }
};
</script>

<style lang="less" scoped>
	.tab_item {
        background: #eee;
        padding: 6px 14px;
        box-sizing: border-box;
        border: 1px solid rgb(216, 208, 208);
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        cursor: pointer;
      }
      .tab_item:not(:first-child) {
         border-left-style: none;
      }
      .tab_item.active {
        border-bottom: none;
      }
</style>