<html>

   <head>

     <title>Vue实现tab切换效果</title>

     <script src="vue.js"></script>

     <style type="text/css">

      *{

         margin:0;

         padding:0;

      }

      #tab{

         width:368px;

         height:200px;

         border:1px solid #ccc;

         margin:20px auto;

      }

      ul li {

         float:left;

         list-style:none;

         width:90px;

         height:30px;

         text-align:center;

         line-height:30px;

         border:1px solid #ccc;

      }

      ul li:hover{

         cursor:pointer

      }

      .active {

         color:red;

      }

      .tabCon {

         clear:left;

         padding:4px 0 0 6px;

      }

     </style>

   </head>

   <body>

     <div id="tab">

       <ul>

         <li

         v-for="(tab, index) in tabs"

         :class="{active:index == nowIndex}"

         @click="tabToggle(index)">

           {{ tab }}

         </li>

       </ul>

       <div class="tabCon">

         <div class="divTab" v-show="nowIndex === 0">内容一</div>

         <div class="divTab" v-show="nowIndex === 1">内容二</div>

         <div class="divTab" v-show="nowIndex === 2">内容三</div>

         <div class="divTab" v-show="nowIndex === 3">内容四</div>

       </div>

     </div>

     <script>

      new Vue({

        el:"#tab",

        data:{

          tabs:["新闻排行","图片排行","视频排行","游戏排行"],

          nowIndex:0

        },

        methods:{

          tabToggle:function(index){

             this.nowIndex = index;

          }

        }

      })

     </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 ...

  10. 用js实现选项卡切换效果

    这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...

随机推荐

  1. linux运维、架构之路-SaltStack快速入门

    一.SaltStack介绍        SaltStack是一个服务器基础架构集中化管理平台,SaltStack基于Python语言实现,也是基于C/S架构,结合轻量级消息队列(ZeroMQ)与Py ...

  2. css3新增的属性 - 分享

    CSS3新增属性   一.transform变换效果 CSS3 提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能. 属性有两个:transform 和 transform-ori ...

  3. 【CF1243B1】Character Swap (Easy Version)【思维】

    题意:给你两个字符串,问是否存在交换方案使得两个字符串变成一样的,方案为只交换一次且只交换s1与s2里的一个字符 题解:若一开始就相同,则存在交换方案 若一开始不同的位置为1个或大于2个,则不存在方案 ...

  4. sql server查询结果复制出来，没有换行(存进去的数据是换行的)

    https://stackoverflow.com/questions/53115490/how-to-correctly-insert-newline-in-nvarchar The problem ...

  5. CentOS7.X安装FastDFS-5.10

    安装准备 yum install \ vim \ git \ gcc \ gcc-c++ \ wget \ make \ libtool \ automake \ autoconf \ -y \ 安装 ...

  6. 涛涛的小马甲 Android之Handler机制

    首先需要了解一个基本的概念ANR:Application not response 即应用程序无响应,也就是俗话说的死机. 出现Anr的原因是: 主线程需要做很多重要的事情,响应点击事件,更新UI如果 ...

  7. Play with Chain 【HDU - 3487】【Splay+TLE讲解】

    题目链接 很好的一道题,用了三天多的时间,终于知道了我为什么T的原因,也知道了在Splay的同时该怎样子的节约时间,因为Splay本身就是大常数的O(N*logN),我们如果不在各种细节上节约时间,很 ...

  8. （转载）STL map与Boost unordered_map的比较

    原链接:传送门 今天看到 boost::unordered_map,它与 stl::map的区别就是,stl::map是按照operator<比较判断元素是否相同,以及比较元素的大小,然后选择合 ...

  9. jvm 这我就能会了 擦

    最近老有人问jvm,恕我直言,完蛋了,不会,慢慢学吧,开始第一个学习,后续补充,走起... 我看的他的https://www.cnblogs.com/dingyingsi/p/3760447.html ...

  10. POJ-1287.Network(Kruskal + Prim + Prim堆优化)

    Networking Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 19674   Accepted: 10061 Desc ...