<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <script src="../js/vue.js"></script>
    <style>
        li{
            list-style: none;
            float: left;
            margin-right: 20px;

        }
    </style>
</head>
<body>
    <div class="app">
        <ul>
            <li v-for="(item,index) in list" @click="tab(index)">{{item.tab}}
                <div v-show="item.show">
                    {{item.title}}
                </div>
            </li>
        </ul>
    </div>
    <script>
        let obj=[
            {"tab":"选项一","show":true,"title":"1111"},
            {"tab":"选项二","show":false,"title":"2222"},
            {"tab":"选项三","show":false,"title":"3333"}
        ];

        var vm=new Vue({
            el:".app",
            data:{
                list:obj
            },
            methods:{
                tab:function(index){

                    for(var i=0;i<this.list.length;i++){
                        this.list[i].show=false;
                        if(i==index){
                            this.list[index].show=true;
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

Vue实现选项卡切换的更多相关文章

  1. vue实现选项卡切换效果

    效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta chars ...

  2. vue实现选项卡切换--不用ui库

    vue的ui库中基本都有选项卡切换的组件,但是在项目开发过程中却不一定能很好的为我们所用,因为里面的样式和 一些状态并不能很好的根据我们的项目需求进行定制.最近项目中使用的是vant-ui中的标签页, ...

  3. vue实现tab选项卡切换效果

    tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...

  4. 使用ViewPager+Fragment实现选项卡切换效果

    实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...

  5. 慕课编程题JS选项卡切换

    Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框 ...

  6. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  7. Android ViewPager实现选项卡切换

    ViewPager实现选项卡切换,效果图如下: 步骤一:这里使用兼容低版本的v4包进行布局,这里eclipse没有输入提示,所以要手动输入,文件名称“activity_main.xml” <Re ...

  8. 7、JavaScript总结——实现选项卡切换的效果

    编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居    200万内购五环三居 140万安家东三环 ...

  9. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

随机推荐

  1. C# 获取exe、dll中的图标，支持获取256x256分辨率

    在网上找过许多文章,都没有成功获取过大图标,只能获取最大32x32.最后自己尝试了相关的windows api,终于找到一个可用的. 主要用到的C++的PrivateExtractIcons函数,具体 ...

  2. C语言中复数运算及调用blas,lapack中复数函数进行科学计算

    C语言中常用的数据类型主要int, float ,double ,char 等,但在科学运算中复数扮演着重要角色.这里讲下C语言中的复数运算以及如何调用blas,lapack库中的复数函数来进行科学计 ...

  3. 计算理论：NFA转DFA的两种方法

    本文将以两种方法实现NFA转DFA,并利用C语言实现. 方法二已利用HNU OJ系统验证,方法一迷之WA,但思路应该是对的,自试方案,测试均通过. (主要是思路,AC均浮云,大概又有什么奇怪的Case ...

  4. alert执行顺序

    <p><span id="span1">Hello World!</span></p> <script type=" ...

  5. 团队作业2--需求分析&原型设计

    一.需求分析 1.用户采访 a.采访对象:   分别对本学院同学.其他专业同学.部分老师等总计15人进行了采访调研: b.采访截图:    c.采访总结: (1).功能需求   能够将所提供的四个数进 ...

  6. 【Alpha】第一次Daily Scrum Meeting

    一.今日站立式会议照片 二.会议内容 1.调研市场现有礼物挑选软件,分析优势,亮点,劣势 2.确立开发环境和安装调试 三.燃尽图 四.遇到的困难 在准备开发环境和安装调试时遇到系统和开发环境不要兼容, ...

  7. 【Alpha】——Second Scrum Meeting

    一.今日站立式会议照片 二.每个人的工作 成员 昨天已完成的工作 今天计划完成的工作 李永豪 完成登录按钮代码 完成添加功能 郑靖涛 完成登录按钮代码 完成删除功能 杨海亮 完成注册按钮代码 完成查找 ...

  8. 201521123111《Java程序设计》第13周学习总结

    本次作业参考文件 正则表达式参考资料 1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.bai ...

  9. Java课设（学生信息管理系统）

    1.团队课程设计博客链接 http://www.cnblogs.com/Min21/p/7064093.html 2.个人负责模板或任务说明 设计登陆界面和学生信息界面的设计,学生信息的显示.退出等功 ...

  10. 201521123042 《Java程序设计》第12周学习总结

    本次作业参考文件 正则表达式参考资料 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String ...