<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. 自定义日志注解 + AOP实现记录操作日志

      需求:系统中经常需要记录员工的操作日志和用户的活动日志,简单的做法在每个需要的方法中进行日志保存操作, 但这样对业务代码入侵性太大,下面就结合AOP和自定义日志注解实现更方便的日志记录   首先看 ...

  2. 奇异值分解(SVD)(基础知识)

    参考:https://www.cnblogs.com/pinard/p/6251584.html 参考:http://blog.csdn.net/u010099080/article/details/ ...

  3. jenkins解决python不是内部命令

    1.在 Windows 提示符下运行是没有问题. 2.把Jenkins项目配置中 python main.py   修改成python可执行文件全路径:D:\Python35\python.exe m ...

  4. php array_search()函数 语法

    php array_search()函数 语法 作用:在数组中搜索某个键值,并返回对应的键名.dd马达生产厂家 语法:array_search(value,array,strict) 参数: 参数 描 ...

  5. prim 模板

    #include<cstdio> #include<vector> #include<cstring> #include<set> #define ma ...

  6. delphi for DirectUI界面库

    下面是form代码: unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Cont ...

  7. 通过 homebrew下载速度过慢的解决方案

    请移步 https://www.cnblogs.com/jingxiaoniu/p/11123377.html 进行操作

  8. ERROR 1146 (42S02): Table 'mysql.servers' doesn't exist

    MySQL版本:mysql5.7.21 修改用户权限,刷新权限表,报1146 mysql> flush privileges; ERROR 1146 (42S02): Table 'mysql. ...

  9. R python在无图形用户界面时保存图片

    在用python的matplotlib,和R中自带的作图,如果想保存图片时,当你有图形用户界面时是没有问题的,但是当没有图形用户界面时,会报错: 在R中,解决办法: https://blog.csdn ...

  10. php 的定界符 <<<eof 的问题

    PHP是一个Web编程语言,在编程过程中难免会遇到用echo来输出大段的html和javascript脚本的情况,如果用传统的输出方法 ——按字符串输出的话,肯定要有大量的转义符来对字符串中的引号等特 ...