v-for实现简单tab切换

最新推荐文章于 2023-10-22 20:02:48 发布
最新推荐文章于 2023-10-22 20:02:48 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： vue的学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Schrodinge/article/details/92586438
版权

tab标签切换
* 标签与内容一一对应

指令
* v-for

    * v-for ...in 
      * v-for ...of
  • v-on
    配置选项
    • methods
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-for列表循环</title>
    <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
    <div id="app" class="p-5">
            <ul class="nav nav-tabs">
                <li class="nav-item" v-for="(tab,idx) in tabs" @click="changeTab(idx)">
                    <a :class="{'nav-link':true,active:idx===activeIndex}" href="#">{{tab}}</a>
                </li>
            </ul>
            <div class="card" v-for="(con,idx) of contents" v-show="idx===activeIndex">
                <div class="card-body">
                    {{tabs[idx] + '最爱' + con}}
                </div>
            </div>
    </div>
    <script src="vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                tabs:['aa','bb','cc','dd','ee'],
                contents:['写代码','买买买','大保健','刷牙','跟着tiantian大保健'],

                activeIndex:0 //高亮tab的索引值
            },
            // 配置方法（事件处理函数等...）
            methods:{
                changeTab(idx){
                    // 事件处理函数中的this指向Vue的实例
                   this.activeIndex = idx
                }
            }
        })
    </script>
</body>
</html>
马马虎虎敲可爱
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue.js指令v-for使用及索引获取
12-29
1.v-for 　　直接上代码。 示例一： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content=initial-scale=1.0, maximum-scale=1.0, user-scalable=no /> <title></title> </head> <body> <div id=didi-navigator> <ul> <li v-for=tab> {{ tab.text }} </li> </ul> </div>
详解使用vue实现tab 切换操作
08-30
使用 Vue 实现 Tab 切换操作 在前端开发中，Tab 切换是一个常见的交互操作，使用 Vue 实现 Tab 切换操作可以使得界面更加灵活和交互性强。下面将介绍使用 Vue 实现 Tab 切换操作的三种思路，並对每种思路进行详细...
vue项目中使用v-for嵌套遍历实现vux组件Tab选项卡内容切换
weixin_44227395的博客
12-11 3262
先上效果图 这是第一张 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面...
Vue实现Tab栏切换（v-for渲染）
weixin_43152611的博客
05-19 7248
在用数据渲染前端页面的几种方式下，原生js和jQuery都需要操作DOM，生成元素，添加元素等一系列操作，而Vue只需要v-for指令就轻松解决。 实现功能：有标题和图片两部分组成，点击相应的标题显示响应的图片，其他图片隐藏。 实现效果: 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w
tab 标签切换 v-for
萝卜芹菜芽
05-23 1077
点睛之笔在于：index 效果： 代码如下： 总结： data 里面存储变量 clickIndex， 点击事件动态改变 clickIndex 的值。 –end
tabs切换（v-for)，填写内容
qq_22841387的博客
10-11 813
实现效果 问题描述： 因为我是通过v-html方法实现的填空题，现在需要将用户历史提交的答案查出来，并动态渲染上页面，但是开始不知道如何去实现。 尝试方法 created/mounted 我是想在页面渲染完成，便自动调用方法，但是失败了，根本就没有调用到这个方法，甚至我都看不到打印信息和报错 原因猜测 因为tabs组件其实在进入开始的时候就已经进入到了created钩子函数中，但是因为我们项目是通过v-for和v-if进行对显示组件的渲染，也就是说 在一开始就已经错过了时间 [Vue生命周期图示]#
基于Vue实现tab栏切换内容不断实时刷新数据功能
08-30
在开发Web应用时，我们经常遇到需要实现动态切换并实时更新数据的需求，特别是在有多个Tab栏的场景下。Vue.js作为一个轻量级的前端框架，提供了强大的数据绑定和组件化能力，非常适合处理这类问题。本篇文章将详细...
vue实现tab切换外加样式切换方法
08-27
Vue 实现 Tab 切换外加样式切换方法 本文将详细介绍 Vue 实现 Tab 切换外加样式切换方法，通过实例代码展示如何使用 Vue 实现 Tab 切换外加样式切换，并对相关知识点进行详细解释。 一、Vue 基础知识 在开始之前...
tab列表切换效果
08-14
这个简单的jQuery Tab切换效果是可扩展的，你可以根据需要添加更多的标签页，或者自定义样式来满足设计需求。为了增强用户体验，还可以添加动画效果，如淡入淡出或滑动切换等。 总结来说，实现Tab列表切换效果的...
vue仿淘宝订单状态的tab切换效果
08-28
在本文中，我们将详细介绍如何使用Vue实现淘宝订单状态的Tab切换效果。这是一个非常实用的功能，可以应用于电商平台、订单管理系统等领域。 知识点1：Vue动态数据切换 在本示例中，我们使用了Vue的动态数据切换...
v-for产生的列表，实现active的切换
asteriaV的博客
11-19 1119
v-for产生的列表，如何实现active样式的切换？ 通过设置当前 currentIndex 实现： <template> <div class="toggleClassWrap"> <ul> <li @click="currentIndex = index" v-bind:class="{clicked: index === curre...
v-for循环写tab组件小案例
chengyou_的博客
05-24 357
展示： v-for循环写tab组件小案例 简单的一个小案例，css文件这么easy就不贴了吧，也没啥样式。 <div id="app"> // 循环两次，一次是button，一次是内容框div。 // @click="changeTab(index)" 点击按钮触发changeTab事件，将当前被点击按钮的index（下标）传过去 // :class="
v-for的使用
奔跑的狮子
10-23 210
代码示例 <li :class="tab.isActive?'navigator-li-active navigator-li':'navigator-li'" v-for="(tab,index) in tabs" :key="tab.id" @click="choiceTab(index)"> <a>{{tab.value}}</a> </li> v-for="(tab,index) in tabs" (tab,index)中tab代表对象的别名，i
每日一练26：vue的选项卡功能编写
Super Livia
11-19 313
参考vue官网：动态组件 效果如下： <template> <div class="demo"> <button v-for="tab in tabs" :key="tab.name" :class="['tab-button', { active: currentTab.name === tab.name }]" @click="currentTab = tab" > {{ tab
vue Tab切换的几种方式
qq_44699164的博客
08-02 2271
第一种 比较灵活简单的方式（切换改变部分的内容在组件中比较方便操作） <template> <div id="app"> <ul> <li v-for="(tab,index) in tabs" @click="toggle(index,tab.view)" :class="{active:active==index}"> {{tab.type}} </li> </ul>
VUE的总结（5）
最新发布
小李在努力学习
10-22 65
（1）去除空格type:1-所有空格 2-前后空格 3-前空格 4-后空格。（2）任意格式日期处理（3）字母大小写切换type:1:首字母大写 2：首页母小写 3：大小写转换 4：全部大写 5：全部小写（4）字符串循环复制,count->次数.（5）字符串替换（6）字符替换*，隐藏手机号或者身份证号等（7）格式化处理字符串（8）现金额大写转换函数（9）保留2位小数 0.3 + 0.9！= 1.2 （10）补零。
VUE中如何给v-for循环出来的元素设置不同的样式
HelloWord176的博客
10-14 3774
效果图： 1. 我们可以给要循环的盒子动态绑定class名 并且传入一个数组 <div class="AllPeople" v-for="(item , index) in rankingData" :key="index" :class="sstt[index]"> <div class="inner"> <span class="innerContent">TOP1告警区域 {{item.area}}<.
vue.js中使用v-for以及获取索引的方法介绍
热门推荐
qq_43067585的博客
11-12 1万+
下面Vue.js教程栏目带大家了解一下vue.js中v-for的使用及索引获取。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 2.x版本： v-for="(item,index)initems" index即索引值。 ==========================分割线============================== 1.x版本： 1.v-for 　　示例一： <!DOCTYPEhtml> <html> ​​​​​...
vue.js实现自定义tab滑动切换效果
lemon今天学习了吗？的博客
08-25 4585
前言：在使用uni-app组件时，需求方要求点击头部的tab切换时，首尾两个点击就在最前面和最后面高亮显示即可，中间的要求选中哪个tab哪个tab就在滑到最中间显示。如this.$refs.myTabRef.$el获取的就是该标签的类名my-tab。如this.$refs.myTabRef获取的myTabRef这个组件，可以使用myTabRef上的方法。获取组件实例 ，可以使用组件的所有方法 （使用在组件上）。vm.$refs：获取页面中所有含有ref属性的DOM元素（普通元素）。...
el-tabs v--for动态渲染
06-06
el-tabs是element-ui框架中的一个组件，可以用于展示多个标签页，并且支持动态渲染。当使用v-for动态渲染el-tabs时，可以通过v-for指令循环渲染el-tab-pane组件，同时为每个el-tab-pane组件设置不同的标签名称和对应的唯一标识符，例如： ``` <template> <el-tabs v-model="activeName"> <el-tab-pane v-for="(item, index) in tabs" :label="item.label" :name="item.name" :key="index"> {{ item.content }} </el-tab-pane> </el-tabs> </template> <script> export default { data() { return { activeName: 'tab1', tabs: [ { label: '标签1', name: 'tab1', content: '标签1的内容' }, { label: '标签2', name: 'tab2', content: '标签2的内容' }, { label: '标签3', name: 'tab3', content: '标签3的内容' } ] } } } </script> ``` 在上面的代码中，v-for指令循环渲染了三个el-tab-pane组件，分别对应三个标签页。每个el-tab-pane组件的标签名称和唯一标识符分别通过tabs数组中的label和name属性进行设置。同时，v-model指令绑定了当前激活的标签页，这样用户在切换标签页时，activeName的值会发生变化，从而切换到相应的标签页。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值