1.  <html>
  2.    <head>
  3.      <title>Vue实现tab切换效果</title>
  4.      <script src="vue.js"></script>
  5.      <style type="text/css">
  6.       *{
  7.          margin:0;
  8.          padding:0;
  9.       }
  10.  
  11.       #tab{
  12.          width:368px;
  13.          height:200px;
  14.          border:1px solid #ccc;
  15.          margin:20px auto;
  16.       }
  17.  
  18.       ul li {
  19.          float:left;
  20.          list-style:none;
  21.          width:90px;
  22.          height:30px;
  23.          text-align:center;
  24.          line-height:30px;
  25.          border:1px solid #ccc;
  26.       }
  27.  
  28.       ul li:hover{
  29.          cursor:pointer
  30.       }
  31.  
  32.       .active {
  33.          color:red;
  34.       }
  35.  
  36.       .tabCon {
  37.          clear:left;
  38.          padding:4px 0 0 6px;
  39.       }
  40.      </style>
  41.    </head>
  42.    <body>
  43.      <div id="tab">
  44.        <ul>
  45.          <li
  46.          v-for="(tab, index) in tabs"
  47.          :class="{active:index == nowIndex}"
  48.          @click="tabToggle(index)">
  49.            {{ tab }}
  50.          </li>
  51.        </ul>
  52.        <div class="tabCon">
  53.          <div class="divTab" v-show="nowIndex === 0">内容一</div>
  54.          <div class="divTab" v-show="nowIndex === 1">内容二</div>
  55.          <div class="divTab" v-show="nowIndex === 2">内容三</div>
  56.          <div class="divTab" v-show="nowIndex === 3">内容四</div>
  57.        </div>
  58.      </div>
  59.      <script>
  60.       new Vue({
  61.         el:"#tab",
  62.         data:{
  63.           tabs:["新闻排行","图片排行","视频排行","游戏排行"],
  64.           nowIndex:0
  65.         },
  66.         methods:{
  67.           tabToggle:function(index){
  68.              this.nowIndex = index;
  69.           }
  70.         }
  71.       })
  72.  
  73.      </script>
  74.    </body>
  75.  </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. 【leetcode】778. Swim in Rising Water

    题目如下: 解题思路:本题题干中提到了一个非常重要的前提:"You can swim infinite distance in zero time",同时也给了一个干扰条件,那就是 ...

  2. SQL Server数据库的软硬件性能瓶颈

    在过去十年里,很多复杂的企业应用都是用Microsoft SQL Server进行开发和部署的.如今,SQL Server已经成为现代业务应用的基石,并且它还是很多大公司业务流程的核心.SQL Ser ...

  3. Apache服务器出现Forbidden 403错误提示的解决方法

    默认web目录/var/www/html 改成 /data/www出现403问题解决: vim /etc/apache2/apache2.conf <Directory /data/www/&g ...

  4. DELPHI 把数据库中的数据转换成XML格式

    function ReplaceString(AString: string): string; begin Result := StringReplace(AString, '&', '&a ...

  5. 20180805-Java ByteArrayOutputStream类

    下面的例子演示了ByteArrayInputStream 和 ByteArrayOutputStream的使用: import java.io.* public class ByteStreamTes ...

  6. css选择器的组合示例

     案例一demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  7. python requests使用登陆之后的cookie

    def getcontent(self): cookie_text=r'ur=FTW; mid=WsrlLwAEAAEfpCstNyTJl-1oZa0w; ig_pr=1; ig_vh=949; cs ...

  8. celery的入门使用

    一.安装步骤 二.使用方法 三.和Django结合 四.部署和监控

  9. 16/7/9_Bootstrap-设计原则

    移动优先: •  在设计的初期就要考虑页面如何在多终端展示 渐进增强: •  充分发挥硬件设备的最大功能

  10. 网络流强化-UVA10480

    做这道题,自己先是想了好几种找被割的边的方法——都被否决了. 后来发现是最小割:只要一条边的两端在不同的点集里面就代表是被割掉的满流边(这些满流边的流量和等于最大流的流量与最小割的权值和). 但是之前 ...