<!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. AFN和SDWebImage请求网络图片的一点问题

    问题1.AFN 处理有关图片相关的请求的问题 在使用AFN Post网络图片的时候发现NSLocalizedDescription=Request failed: unacceptable conte ...

  2. 交换机的Ethernet Channel

    端口聚合也叫做以太通道(ethernet channel),主要用于交换机之间连接.由于两个交换机之间有多条冗余链路的时候,STP会将其中的几条链路关闭,只保留一条,这样可以避免二层的环 路产生.但是 ...

  3. 201521123054《Java程序设计》第1周学习总结

    #1. 本章学习总结 你对于本章知识的学习总结 本章我们学习了各种java相关文件的使用,能够进行基本的程序操作: 学会使用博客.码云与PTA管理java: #2. 书面作业 1.为什么java程序可 ...

  4. Java课程设计-随机密码生成器

    1.团队课程设计博客链接 团队课程设计博客地址 2.个人负责模板 随即密码生成器算法 3.自己的代码提交记录截图 4.自己负责模块或任务详细说明 负责随机密码算法设计实现 通过不同种类选择下生成密码, ...

  5. 多线程：多线程设计模式（二）：Future模式

    一.什么是Future模型: 该模型是将异步请求和代理模式联合的模型产物.类似商品订单模型.见下图: 客户端发送一个长时间的请求,服务端不需等待该数据处理完成便立即返回一个伪造的代理数据(相当于商品订 ...

  6. 鸟哥Linux学习笔记07

    1, vi 是 老式的文字处理器,不过功能已经很齐全了,但是还是有可以进步的地方. vim可以说是程序开发者的一项很好用的工具,vim官网(http://www.vim.org)自己也说vim是一个“ ...

  7. Spring-Boot:6分钟掌握SpringBoot开发

    构建项目 从技术角度来看,我们要用Spring MVC来处理Web请求,用Thymeleaf来定义Web视图,用Spring Data JPA来把阅读列表持久化到数据库里,姑且先用嵌入式的H2数据库. ...

  8. python 部署 Restful web

    使用python web做Restful 风格,很简单,采用Flask框架轻松实现一个RESTful的服务. Restful相关介绍请查看:https://www.ibm.com/developerw ...

  9. 【编程之外】还记得曾经给'大学导师'写过的报告嘛 --> 前方高能

    写在前面 本文不是讲技术的,也没什么代码可看 本文不是讲技术的,也没什么代码可看 本文不是讲技术的,也没什么代码可看 还记得我们曾经给我们大学''导师''写过的报告嘛? 大学他愿意在凌晨6点向你询问近 ...

  10. OC——多态

    书接上文,上文提到继承一个很大用途的是为了更好的实现多态,现在我们就来看看OC的多态. 多态:顾名思义就是好多种状态,以前学C#时候印象最深刻的例子是好多个类共同实现同一个接口,然后把这些类的对象都装 ...