<!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. 汇编指令-CMP、TEQ(5)

     cmp:(compare)指令进行比较两个操作数的大小  格式: cmp oprd1,oprd2 比较oprd1和oprd2操作数,然后通过助记符来实现想要的判断. teq: (test equal ...

  2. python--用户登录验证

    目标要求: 1.最多输入3次用户名密码, 2.如果是被锁用户,则一次即退出程序, 3.如果输入正确的用户名密码,则提示登陆成功,程序结束, 4.3次输入不对,会将用户写入被锁用户列表,当然,该用户名需 ...

  3. 201521123083《Java程序设计》第13周学习总结

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

  4. 使用Eclipse Egit与码云管理你的代码

    总体流程: 建立远程仓库 建立本地仓库并与远程仓库关联 将Eclipse中的项目提交到本地仓库并进而push到远程仓库 一. 配置Eclipse EGit 图解Eclipse中安装及配置EGit插件中 ...

  5. 201521123036 《Java程序设计》第12周学习总结

    本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 书面作业 将Student对象(属性:int id, String name,int age,double grad ...

  6. Java课程设计——GUI密码生成器201521123035

    1.团队课程设计博客链接 (http://www.cnblogs.com/wuling15/p/7061857.html) 2.个人负责模块或任务说明 (1)确定课题并进行任务分工 (2)编写随机数产 ...

  7. 201521123085 《Java程序设计》第12周学习总结

    1. 本周学习总结 2. 书面作业 将Student对象(属性:int id, String name,int age,double grade)写入文件student.data.从文件读出显示. 1 ...

  8. cms内容模型标签

    内容模块 内容模块PC标签调用说明 模块名:content 模块提供的可用操作 操作名 说明 lists 内容数据列表 relation 内容相关文章 hits 内容数据点击排行榜 category ...

  9. centOS 7一个解决“network.service: control process exited, code=exited status=1”方法

    今天早上2017-08-04,我打开虚拟机,使用远程工具xshell对虚拟机进行连接,我发现连接不上去,然后我ifconfig,发现找不到ens33了,就剩一个本地回环,看来是我的网络出现了问题,然后 ...

  10. 移动商城第三篇【搭建Mybatis和Spring环境、编写Dao、Service在Core模块】

    Mybatis和Spring环境搭建 由于我们的所编写的dao层.service代码可能前台和后台都需要用到的,因此我们把环境搭建在core模块中 逆向工程 首先,我们要做的就是品牌管理,我们首先来看 ...