<!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. 如何在centos7上安装源码包

    在我们使用linux的过程中,有很多程序是通过红帽官网给的系统中安装的,但是一般来说,系统更新的速度比较慢,如果这个时候我们又想用最新版的该怎么办呢?总不能一直等系统升级吧╮(╯﹏╰)╭所以,我们可以 ...

  2. [js高手之路]Node.js模板引擎教程-jade速学与实战1

    环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...

  3. mysql中int(10)与int(11)有什么区别吗？

    先来看下面的图片 声明字段是int类型的那一刻起,int就是占四个字节,一个字节8位,也就是4*8=32,可以表示的数字个数是2的32次方(2^32 = 4 294 967 296个数字). 4 29 ...

  4. PHP之CI框架第一课

  5. 转： 【Java并发编程】之二十：并发新特性—Lock锁和条件变量（含代码）

    简单使用Lock锁 Java5中引入了新的锁机制--Java.util.concurrent.locks中的显式的互斥锁:Lock接口,它提供了比synchronized更加广泛的锁定操作.Lock接 ...

  6. MyEclipse安装步骤和破解

    Myeclipse的安装步骤 MyEclipse简介: MyEclipse,是在eclipse 基础上加上自己的插件开发而成的功能强大的企业级集成开发环境,主要用于Java.Java EE以及移动应用 ...

  7. oop作业二—circle

    oop作业-circle 题目描述 编写一个程序,要求根据给定的圆的半径求圆的面积,并将求得的结果打印出来. 要求: 输入输出采用cin和cout. 建立一个工程,将程序写成两个.cpp和一个.h的形 ...

  8. 基于GUI的四则运算

    基于GUI的四则运算 李志强 201421123028 连永刚 201421123014 林方言 201421123023 coding 地址 https://git.coding.net/lizhi ...

  9. 团队作业8——Beta项目（冲刺计划）

    Beta阶段冲刺计划 经过几周的努力我们完成了Alpha的开发,进过一段时间的调整与重组我们继续向Beta版进发. 1. 新成员介绍 林乔桦(201421123074):掌握c语言,JavaScrip ...

  10. 团队作业4——第一次项目冲刺（Alpha版本）4.22

    团队作业4--第一次项目冲刺(Alpha版本) Day one: 会议照片 由于团队中的组员今天不在学校,所以我们的站立会议提前一天展开. 项目进展 由于今天是Alpha版本项目冲刺的第一天,所以没有 ...