<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. HTTP通信安全和Web攻击技术

    一.HTTPS,确保Web安全 在HTTP协议中可能存在信息窃听或身份伪装等安全问题,HTTP的不足: 通信使用明文(不加密),内容可能会被窃听  不验证通信方的身份,因此有可能遭遇伪装 无法证明报文 ...

  2. Linux内核设计与实现 总结笔记（第八章）下半部和推后执行的工作

    上半部分的中断处理有一些局限,包括: 中断处理程序以异步方式执行,并且它有可能打断其他重要代码的执行. 中断会屏蔽其他程序,所以中断处理程序执行的越快越好. 由于中断处理程序往往需要对硬件进行操作,所 ...

  3. php大文件断点续传

    该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开始. 如何分 ...

  4. [CSP-S模拟测试]:题（DP）

    题目描述 由于出题人赶时间所以没办法编故事来作为背景.一开始有$n$个苹果,$m$个人依次来吃苹果,第$i$个人会尝试吃$u_i$或$v_i$号苹果,具体来说分三种情况.$\bullet 1.$两个苹 ...

  5. js 通过浏览器直接打开应用程序（IOS，Android）

    实现效果 如下图所示,在手机浏览器中访问京东的手机版网站(m.jd.com),顶部会有一个广告图,点击这个广告图,如果手机上已经安装了京东App,则直接打开,如果没有安装,则开始下载. 实现方式 1. ...

  6. SecondModel 实现类

    package com.test.mvp.mvpdemo.mvp.v6.model; import com.test.mvp.mvpdemo.mvp.v6.SecondContract;import ...

  7. 牛客提高D3t1 破碎的矩阵

    分析 我们发现如果行的异或和等于列的异或和那么对于n-1行m-1列的所有数的选择都是任意的 因为一定可以在它的行末/列末选一个合适的数是的整体满足 但是我们发现对于右下角那一个数是否满足存疑 我们设矩 ...

  8. JVisualVM 模拟一次内存泄漏场景分析

    首先贴一段内存泄漏的代码并且执行.(内存泄漏:GC回收不掉的实例对象) package com.example.demo.memoryLeakDemo; import com.example.demo ...

  9. vue.js + element 搭建后台管理系统 笔记（一）

    此文仅记录本人在搭建后台系统过程中遇到的难点及注意点,如果能帮到各位自然是极好的~~~ 项目主要架构:vueJS.elementUI.scss 一.项目初始化 首先需要安装nodejs,安装方法就不在 ...

  10. PHP 开启错误显示并设置错误报告级别

    警告:生产环境永远都不要显示任何错误信息! 显示错误(display_errors)和错误报告(error_reporting)是两回事.PHP 脚本发生错误时,可以根据设置选择是否报告这个错误(记录 ...