<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. LeetCode--055--跳跃游戏(java)

    给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示例 1: 输入: [2,3,1,1,4] 输出: true ...

  2. Influxdb根据配置文件启动（Influxdb的数据存储）

    1.在Influxdb文件夹下建立一个bat文件 2.文件内容如下: @echo offSETLOCAL :: 获取当前批处理所在路径SET InfluxdP==%~dp0 :: 开启influxdb ...

  3. 微信公众号开发（二）获取access_token

    参考:https://www.cnblogs.com/liuhongfeng/p/4848851.html 一:介绍. 接口调用请求说明 http请求方式: GET https://api.weixi ...

  4. php单点登录实现原理实例详解

    单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任. 单点登录在大型网站里使用 ...

  5. vue框架搭建--移动端

    由于Vue官方提供了vue-cli手脚架,所以快速构建出个简单的项目框架.在做移动端项目时,因为移动端的特性可能会用到些比较常用的插件,就在这里简单介绍如何使用 这里只介绍怎么在项目中安装引用和简单的 ...

  6. nginx: [emerg] open() "/var/run/nginx/nginx.pid" failed (2: No such file or directory)

    测试服务器 问题描述 [root@g-s-- nginx]# /usr/sbin/nginx -c /etc/nginx/nginx.conf open() : No such file or dir ...

  7. Android keystore 密码找回

    昨天准备给自己的应用发布一个新版本,在apk打包时,发现之前的用的keystore密码忘了. 蛋碎了一地,我把我所能想到的密码都试了一遍(注:我平常在各个门户网站注册基本上用的都是那几个字母和数字组合 ...

  8. 在服务器上给tomcat指定jdk版本

    export JAVA_HOME=/usr/local/jdk1.8 --路径是:Jdk8所在的目录 export CATALINA_OPTS="-Djava.awt.headless=tr ...

  9. flask之二

    flask之二 预热 在渲染模板的时候,默认会从项目根路径下的templates目录下查找模板 如果想要指定模板路径的时候,就在初始化APP的时候,这样操作即可: app = Flask(__name ...

  10. MySQL分组聚合group_concat + substr_index

    场景:给予一张商品售卖表,表中数据为商品的售卖记录,假设表中数据是定时脚本插入的,每个时间段的商品售卖数量不同,根据此表找各个商品的最多售卖数量的数据. 1.数据表 CREATE TABLE `goo ...