<!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. hdu2546 01背包 重学背包

    题意:给出菜的价钱和自己的余额.使自己余额最少,注意余额大于5的情况可以买任意的菜. 思路:小于5的余额不能买菜,直接输出,大于五的余额,留下5元买最贵的菜,剩下的余额进行01背包,将剩下的余额减去0 ...

  2. javascript this对象

    函数运行时,自动生成的一个内部对象,只能在函数内部使用 随着函数使用场合的不同,this的值也发生着改变,但是有一个总原则:this指的是调用函数的那个对象(核心) this对象的指向 一般情况下,我 ...

  3. IPv4子网掩码回顾

    子网掩码的介绍: IP协议标准规定:每一个使用子网的节点都选择一个32位的位模式,若位模式中的某位置为1,则对应IP地址中的某位就为网络地址(包括网络部分和子网号)中的一位:若位模式中的某位置0,则对 ...

  4. 如何在sublime+chrome中调试php代码？

    1.搭建php本地运行环境具体点击如何使用phpstudy本地搭建多站点(每个站点对应不同的端口) 2.下载php_xdebug.dll, [5.3版以上的php下载地址]http://pecl.ph ...

  5. 【集美大学1411_助教博客】团队作业2——需求分析&原型设计 成绩

    首先要向各位同学道歉,最近助教的工作较多,并且伴随着频繁的出差,评论博客和评分都不及时,以致于同学们都没有得到反馈,在此我要表示歉意.其次,对于第二次团队作业,有两个团队没有提交到班级博客中但按时完成 ...

  6. 第二次项目冲刺（Beta阶段）--第六天

    一.站立式会议照片 二.项目燃尽图 三.项目进展 1.继续完成docx文件的读取,听取助教的意见采用原型法,先简单写了一个可运行的docx文件的读取类,还是无法实现docx的读取,异常,但是该导入的j ...

  7. 团队作业8----第二次项目冲刺（beta阶段）5.23

    Day5-05.23 1.每日会议 会议内容: 1.组长林乔桦对昨日的工作进行了总结并且安排今日的任务. 2.潘益靖副组长说明昨日任务的完成情况. 3.组员对昨天的各项工作进行了汇报以及对今天的工作进 ...

  8. 201521123110《java程序设计》第八周学习总结

    1. 本周学习总结 2. 书面作业 1.List中指定元素的删除 上课就交了,编写时主要用remove方法,然后Iterator的remove()方法可删除当前下标为i的元素后,该元素后的所有元素将往 ...

  9. 201521123089 《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1.代码阅读:Child压缩包内源代码1.1 com.parent包中Child.java文件能否编译通过?哪 ...

  10. 201521123087 《Java程序设计》第4周学习总结

    1. 本周学习总结 2. 书面作业 注释的应用使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图)                                 ...