Vue使用el-radio-group实现tab选项卡效果

最新推荐文章于 2024-08-26 02:19:44 发布

技术群主

最新推荐文章于 2024-08-26 02:19:44 发布

阅读量3.3k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/huang_wei_cai/article/details/100977420

版权

本文介绍如何在Vue中使用el-radio-group组件来创建tab选项卡效果。通过v-model绑定radio值，实现点击按钮后显示相应标签页内容。

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

效果图

完整源码

<template>  
  <div id="app">

    <div style="margin:0 auto;width:325px; margin-bottom:18px">
      <el-radio-group v-model="radio" size="medium">
        <el-radio-button label="代码仓库"></el-radio-button>
        <el-radio-button label="网站"></el-radio-button>
        <el-radio-button label="微博"></el-radio-button>
        <el-radio-button label="公众号" disabled></el-radio-button>
      </el-radio-group>
    </div