上代码:
<template>
  <div class="push">
    //点击按钮
    <div class="tab">
  //tab被点击的几个按钮需要被循环出来,方便获取其index
        <span v-for="(item,index) in strands" :key="index" 
       //点击事件,通过被选择的按钮(index)给自定义属性赋值
  @click="clickTab(index)"
       //让被选择的选项卡按钮与众不同,改变样式
       :class="{selected:curTab==index}">{{item}}</span>
    </div>
   //选项卡内容(放在一个大的div中)
    <div class="content">
        <span v-if="curTab==0">   //自定义属性的值被改变时,通过v-if(v-show)判断显示被选择的选项卡内容
            <Push0></Push0>       
        </span>
        <span v-if="curTab==1">
            <Push1></Push1>
        </span>
        <span v-if="curTab==2">
            <Push2></Push2>
        </span>
        <span v-if="curTab==3">
            <Push3></Push3>
        </span>
        <span v-if="curTab==4">
            <Push4></Push4>
        </span>
    </div>
  </div>
</template>
<script>
import Push0 from'../components/push/push0'
import Push1 from'../components/push/push1'
import Push2 from'../components/push/push2'
import Push3 from'../components/push/push3'
import Push4 from'../components/push/push4'
export default {
    name: "push",
    data(){
        return{
            strands:['精彩赛事','我的好友','体育赛事','热门精选','更多信息'],
            curTab:0                  //自定义属性赋值0,页面刚加载显示的组件
        }
    },
    components:{
        Push0,
        Push1,
        Push2,
        Push3,
        Push4,
    },
    methods:{
      clickTab(index){
          this.curTab=index      //点击事件给自定义属性赋值
      } 
    } 
}
</script>
<style scoped>
.selected{
    background: url(../assets/img/push/glod.png)!important;
    background-size: 100% 100%!important;
    background-repeat: no-repeat!important;
}
</style>
*1.这里使用v-if是由于几个组件切换时并未刷新整个页面,不方便几个页面数据同步

vue实现tab选项卡切换的更多相关文章

  1. vue实现tab选项卡切换效果

    tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...

  2. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

  3. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  4. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  5. 微信小程序Tab选项卡切换大集合

    代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  6. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  7. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  8. Axure实现Tab选项卡切换功能

    这几天用Axure画原型图的过程中,须要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以能够用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的 ...

  9. 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

    LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

随机推荐

  1. JS-语句二

    for循环的4个要素: 1.初始值        2.条件判断        3.状态改变        4.循环体 for循环的写法: for(var i=0;i>10;i++)        ...

  2. filter的原理(转)

    今天学习了一下javaweb开发中的Filter技术,于是在网上搜了一下相关资料,发现这篇博客写的很不错,于是希望能转载过来以备以后继续学习之用.(原:http://www.cnblogs.com/x ...

  3. sqlmap简单流程使用

    -u “(url)” 1.判断可注入的参数 2.判断可以用那种SQL注入技术来注入 3.识别出哪种数据库 4.根据用户选择,读取哪些数据 sqlmap支持五种不同的注入模式: 1.基于布尔的盲注,即可 ...

  4. IUBS|CODATA|Open Data in a Big Data World|National Genomics Data Center

    生命组学: National Genomics Data Center中的section: LncRNA知识库+non-code加入RNA central GWAS Atlas基因组关联分析数据库 E ...

  5. Maven--反应堆(Reactor)

    在一个多模块的 Maven 项目中,反应堆是指所有模块组成的一个构建结构.对于单模块的项目,反应堆就是该模块本身.但对于多模块项目来说,反应堆就包含了各模块之间继承与依赖的关系,从而能够自动计算出合理 ...

  6. Thread--synchronized不能被继承?!?!!!

    参考:http://bbs.csdn.net/topics/380248188 其实真相是这样的,“synchronized不能被继承”,这句话有2种不同意思,一种是比较正常的.很容易让人想到的意思: ...

  7. 查路由途径 traceroute tracert

    linux 用  traceroute IP windows用 tracert IP 虚拟机下使用无效

  8. Java 面向对象异常处理,finally,覆盖时异常特点,package,import,包之间的访问(10)

    Java 面向对象异常处理, finally:final 关键字的用法参考http://www.cnblogs.com/itcqx/p/5541659.html 覆盖时异常特点,package,imp ...

  9. Aras Innovator获取项目任务序列号

    //方法名:GetProjectTasksNumber //功能描述:获取项目任务序列号 //原作者:joe //创建时间:20141225 //版权所有(C)JOE.FAN //---------- ...

  10. PAT Advanced 1008 Elevator (20) [数学问题-简单数学]

    题目 The highest building in our city has only one elevator. A request list is made up with N positive ...