Vue实现tab切换

最新推荐文章于 2024-05-18 18:15:28 发布
最新推荐文章于 2024-05-18 18:15:28 发布
阅读量2.3k 收藏
点赞数
分类专栏： 技术文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvff66/article/details/77069720
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue"></script>
    <style>
        *{margin:0;padding:0;}
        body{padding:15px;}
        a{text-decoration: none;}
        ul{list-style:none;height:41px;}
        li{float:left;padding:10px;}
        #container div{height:300px;border:1px solid #0000ed;clear:both;}
        li.active{background:rgba(12,23,42,0.5);}
        li.active a{color:#fff;}
    </style>
</head>
<body>
<div id="container">
    <ul>
        <list-li v-for="(msg,index) in msgs" :msg="msg" :key="msg.id" :class="{ active:oks['ok'+msg.id]}"></list-li>
    </ul>
    <list-div v-if="ok" v-for="(ok,index) in oks" :ok="ok"  :index="index" :key="index"></list-div>
</div>

    <script>
        Vue.component('list-li',{
            props:['msg','oks'],
            template:'<li  @click="clickli(msg.id)" :mark="msg.id" ><a href="#">{{msg.text}}</a></li>',
            methods:{
                clickli:function(index){
                    for(let ok in vm.oks){
                        vm.oks[ok]=false;
                    }
                    vm.oks['ok'+index]=true;
                }
            }
        });
        Vue.component('list-div',{
            props:['ok','index'],
            template:'<div>{{index}}-{{ok}}</div>'
        });
        var vm=new Vue({
            el:'#container',
            data:{
                msgs:[
                    {id:1,text:'首页'},
                    {id:2,text:'详情页'},
                    {id:3,text:'产品页'},
                    {id:4,text:'联系我们'}
                ],
                oks:{
                    ok1:true,
                    ok2:false,
                    ok3:false,
                    ok4:false
                }
            }

        })
    </script>
</body>
</html>
lvff
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 实现tab切换保持数据状态
10-15
在Vue开发过程中，保持数据状态是常见的需求，特别是在实现Tab切换功能时，用户可能希望在切换Tab后，之前填写的数据或者加载的内容能够被保存。本文将深入探讨如何在Vue中实现Tab切换时保持数据状态。 首先，让...
vue之tab栏切换
小多的博客
08-08 6987
一个简单的tab栏切换组件，由tabs以及tab-pane组成。
Vue3使用组件库的tab切换以及其他的切换，echarts图表，图表出现宽度压缩变窄的问题
qq_42859450的博客
10-18 822
echarts图表变形
Vue.js中组件化开发实践：自定义导航栏与TabBar组件的设计与实现
最新发布
chenchuang0128的博客
05-18 510
摘要随着前端技术的发展和业务的日益复杂，组件化开发成为提升开发效率和降低维护成本的关键。本文将以Vue.js框架为基础，探讨如何设计并实现一个自定义的导航栏与TabBar组件，特别是针对iOS机型的适配和头部导航的自定义。通过阿里巴巴矢量图标库的使用，我们将展示如何为组件添加高度和图标自定义的功能。一、引言在前端开发中，导航栏和TabBar是常见的界面元素，对于用户体验和界面美观度至关重要。然而，传统的开发方式往往将这些元素作为整体应用的一部分，导致修改和维护变得困难。
vue--实现Tabbar
小白小白从不日别的博客
12-16 3192
最终实现的大致效果如下： 这里一样采用组件封装的方式，大致如下： 组件拆分: MyHeader.vue – 复用之前的（上一个案例 vue--实现购物车 时里面封装的 头部组件） MyTabBar.vue – 底部导航 MyTable.vue – 封装表格 三个页面 - MyGoodsList.vue – 商品页 - MyGoodsSearch.vue – 搜索页 - MyUserInfo.vue – 用户信息页 需要安装的第三方包： npm install less ..
vue实现tab切换功能的几种方法
weixin_45529161的博客
10-17 1万+
vue实现tab切换功能的几种方法 1.组件切换 利用vue里的 :is属性和keep-alive缓存 效果图 代码 <template> <div> <div class="tab"> <ul class="tab_button"> <li v-for="...
Vue实现TabBar底部导航栏灵活组件保姆级超详细
qq_42696432的博客
11-28 1万+
Vue实现TabBar底部导航栏组件 TabBar效果预览： TabBar实现思路 一、如果在下方有一个单独的TabBar组件，如何封装 自定义tabbar组件，在APP中使用。 让TabBar处于底部，并且设置相关的样式。 二、TabBar中现实的内容由外界决定。 定义插槽。 flex布局评分TabBar。 三、自定义TabBarItem，可以传入图片和文字 自定义tabbarItem，并且定义两个插槽:图片，文字。 给两个插槽外层包装div，用于设置样式。 填充插槽，实现底部Tab
详解使用vue实现tab 切换操作
08-30
使用 Vue 实现 Tab 切换操作 在前端开发中，Tab 切换是一个常见的交互操作，使用 Vue 实现 Tab 切换操作可以使得界面更加灵活和交互性强。下面将介绍使用 Vue 实现 Tab 切换操作的三种思路，並对每种思路进行详细...
vue实现tab切换外加样式切换方法
08-27
Vue 实现 Tab 切换外加样式切换方法 本文将详细介绍 Vue 实现 Tab 切换外加样式切换方法，通过实例代码展示如何使用 Vue 实现 Tab 切换外加样式切换，并对相关知识点进行详细解释。 一、Vue 基础知识 在开始之前...
【VUE基础】综合练习-实现Tab-Bar
Robin的博客
10-20 986
使用新建一个项目工程(使用)。在文件夹assest下新建css/base.css,用于初始化css 将tabbar抽离成组件在components下新建tabbar文件夹，新建和,组件是在组件中抽取出来的，可以传入图片和文字（比如首页），所有需要使用插槽代替。 TabBar弄一个slot插槽用于插入TabBarItem组件（可能插入多个）. TabBarItem组件中插入2个插槽一个用于插入图片一个用于插入文字。 在MainTabBar组件中加入另外2个组件。最后在app.vue中导入Main
Vue实现选项卡切换，tab切换
热门推荐
努力变好
10-28 1万+
1、实现tab切换就是 单击一个选项卡显示其对应的内容，且被点击的选项卡改变颜色，下面有两种实现方法（都不要忘了vue.js的目录要写正确） 2、第一种方法效果图 这个没什么可说的，直接看代码吧（两种方式） 2、第一种完整代码（下边这段代码是我在网上学的） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document<.
Vue - tabbar(底部导航栏)
qq_33962481的博客
08-20 7075
文章目录一、TabBar实现思路二、assets文件夹2.1 在App.vue里面动态引用css文件三、基本搭建四、TabBar和TabBarItem组件封装4.1 TabBar组件封装4.2 TabBarItem组件封装 一、TabBar实现思路 定义一个TabBar组件 TabBar中显示的内容由外界决定 定义插槽 二、assets文件夹 assets文件夹里面存放的是一些css文件和img文件 在assets文件夹里面创建一个base.css, 配置取消网页默认的padding和ma
vue实现tab栏切换
VIVI_CSDN01的博客
08-08 5984
vue tab栏切换 高亮显示当前页
vue项目中Tab切换，以及不同状态如何显示
95后独自打拼的程序猿
04-21 1502
前言 例如：这里主要讲到项目中我们会遇到的Tab切换，以及订单状态的显示。 一、Tab切换要如何去写？ 代码如下（示例）： <el-tabs type="border-card"> <el-tab-pane label="全部"> <el-table :data="auditData" style="width: 100%; margin-top: 1%" :header-cell-st
【vue案例】vue实现tab选项卡
马云
11-01 1万+
vue实现tab选项卡 文章目录vue实现tab选项卡一、效果图展示二、静态页面结构csshtmljavascript三、vue实现1、将静态结构和样式重构为基于vue模板语法的形式vue实现ul标签渲染2、处理事件绑定和js控制逻辑vue实现点击切换四、完整代码 一、效果图展示 实现的效果图如下： 二、静态页面结构 css <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .tab { wi
自定义vue底部导航栏组件tabbar
weixin_45663697的博客
09-06 3630
TabBar 自定义vue底部导航栏组件tabbar，效果如下所示： 1. 基本结构搭建 根据组件封装的思想，我们事先创建几个文件夹，用来存放对应部分的代码。文件结果如下图所示： 从效果图来看底部可以分为两个部分：最外层框架区和内层图标区 组件就是需要的时候可以直接引用并且方便更改，那么我们就可以将tabbar导航栏组件划分为两个小的组件：TabBar.vue、TabBarItem.vue TabBar.vue设置导航栏组件的外观形状 TabBarItem.vue负责设置内置图标汉字的样
vue 可滑动的tab组件----vux插件tab的使用
Crazy_GirlLL的博客
10-25 958
原本vux的可滑动的tab是根据scrollWidth的长度来自动计算每一个tab-item的宽度的，因为包含这tab-item的tabBox这个div使用的是flex布局，而tab-item是它的子元素，它会自动沾满tabBox。当超出手机的可视宽度时,获取当前屏幕宽度，然后评分长度，计算之后，平均分给tab-item，因为每一个tab-item自己的样式中有设置的padding属性，所以间距相同，不需要额外为间距分配空间。1. 每个tab-item的间距是相同的，可定制。
Vue开发实例（十）Tabs标签页打开、关闭与路由之间的关系
Daniel
03-03 2028
创建页面顶部的tabs标签，梳理页面标签打开关闭与路由之间的关系
vue实现tab切换实验内容
05-25
好的，下面是一个简单的 Vue 实现 tab 切换的示例： ```html <template> <div class="tab-container"> <ul class="tab-nav"> <li v-for="(tab, index) in tabs" :key="index" :class="{ active: currentTab === index }" @click="currentTab = index">{{ tab.title }}</li> </ul> <div class="tab-content"> <div v-for="(tab, index) in tabs" v-show="currentTab === index" :key="index">{{ tab.content }}</div> </div> </div> </template> <script> export default { data() { return { currentTab: 0, tabs: [ { title: 'Tab 1', content: 'This is the content of Tab 1' }, { title: 'Tab 2', content: 'This is the content of Tab 2' }, { title: 'Tab 3', content: 'This is the content of Tab 3' } ] } } } </script> <style> .tab-container { display: flex; flex-direction: column; width: 500px; } .tab-nav { display: flex; list-style: none; margin: 0; padding: 0; } .tab-nav li { margin-right: 10px; padding: 5px; cursor: pointer; border: 1px solid #ccc; } .tab-nav li.active { background-color: #ccc; } .tab-content { border: 1px solid #ccc; padding: 10px; } </style> ``` 这个示例中，我们使用了一个 `currentTab` 变量来记录当前选中的 tab，然后使用 `v-for` 循环渲染出每个 tab 的标题和内容。标题部分使用一个 ul 和若干个 li 元素来展示，而内容部分则使用若干个 div 元素，并通过 `v-show` 指令来控制哪个内容块显示。在点击某个 tab 标题时，我们通过 `@click` 事件来更新 `currentTab` 的值，从而切换到对应的内容。 以上是一个简单的 Vue 实现 tab 切换的示例，你可以在此基础上根据自己的需求进行调整和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值