<template>

<div class="cp-select">

                    <div class="leftSelect" :class="{'z-active':stlle==first}"
@click="toggleTabs(first)">
                     <p>详情分析</p>
                    </div>
                    <div class="rightSelect" :class="{'z-active':stlle==second}"
@click="toggleTabs(second)">
                        <p>走势分析</p>
                        <div class="newTip"></div>
                    </div>
                </div>
                <prince :is="currentView" keep-alive></prince>
</template>
 
<script type="text/ecmascript-6">
  import first from '../../../components/first'; 引入两个子文件first和second
import second from '../../../components/second';

export default {

data () {
return {
         first: "first", //导航栏文本1
second: "second",
        currentView: 'first',默认显示页面为first子页面
        stlle:'first' 默认样式为first
         }
         },
mounted() {
 
    },
    components: {
first,
second,
},

methods: {

toggleTabs (tabText) {
                 this.currentView = tabText;
                 this.stlle=tabText;
             }
         },
}
 
</script>
 
这个是自己写的tab切换页,里面包含了css样式的切换,另外vue的tab切换可以参考的的有:
http://www.jb51.net/article/122451.htm   
还有个博客写的也比较清楚:
http://www.cnblogs.com/pearl07/p/7053028.html 
http://www.cnblogs.com/wrcold520/p/5531960.html 
这三个方法都是一样的。只是没有给出切换的样式。
在另外几个网址上有关于样式的切换:
1,https://segmentfault.com/q/1010000007627274/a-1020000008460976
2,http://blog.csdn.net/wxl1555/article/details/76727426
 
 
最终的页面效果如下:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

vue.cli实现tab切换效果的更多相关文章

  1. Vue.js实现tab切换效果

    利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...

  2. vue2.0使用动态组件实现tab切换效果(vue-cli)

    <template> <div> <div>#动态组件实现tab切换效果#</div><br><br><br> &l ...

  3. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

  4. 实用CSS3属性之 :target伪类实现Tab切换效果

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支 ...

  5. jquery写的tab切换效果 非常简单

    自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...

  6. CSS3 :target伪类实现Tab切换效果 BY commy

    http://www.shejidaren.com/examples/css3-target/css3-target.html#tab1 标签一 标签二 标签三 欢迎加设计达人Q群:50063010设 ...

  7. jquery另外一种类似tab切换效果

    简要:最近做项目一些效果不能用淘宝kissy框架 所以代码得自己写啊 网上当然有很多组件 但是用他们的代码很多(有的是我不需要的代码) 且还要看API 还不如自己动手写个简单一个,是这么一种简单的效果 ...

  8. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  9. tab切换效果 网站中的图片自动切换

    网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...

随机推荐

  1. 20155315实验三 敏捷开发与XP实践

    实验内容 1.XP基础 2.XP核心实践 3.相关工具 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程: 2.完成实验.撰 ...

  2. C语言复习20170805

    循环控制结构 重复处理次数时已知的循环称为计数控制的循环,若重复处理次数为未知,是由给定情况控制的,称为条件控制的循环. C语言提供for.while.do while三种循环语句实现循环结构. 循环 ...

  3. 用sudo 运行命令的时候,环境变量用的是super用户的环境变量

    比如今天在~/.bashrc设置了JAVA_HOME, 而sudo运行命令的时候却显示没有设置可用的JAVA_HOME

  4. Ubuntu + apache + Mysql +php

    发生了乱码问题: 打开apache配置文件: sudo gedit /etc/apache2/apache2.conf,在最后面加上:AddDefaultCharset UTF-8,如果还乱码,再将U ...

  5. PostgreSQL参数学习:wal_keep_segments

    http://www.postgresql.org/docs/9.3/static/runtime-config-replication.html 参考官方文档: wal_keep_segments ...

  6. c++ 结束程序的几种方式

    abort exit 一.用abort()结束程序 用abort()表示非正常结束程序.如果要正常结束程序得用exit() 二.用exit()结束程序 用exit()它可以使程序正常结束,这个函数 ...

  7. day2 CSS- 选择器

    1.CSS 语法 css是英文Cascading Style Sheets的缩写,称为层叠样式表 2.css的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现 ...

  8. Docker入门篇(一)之docker基础

    1.Docker 架构 http://blog.csdn.net/u012562943/article/category/6048991/1Docker 使用客户端-服务器 (C/S) 架构模式,使用 ...

  9. mybatis mapper空指针异常的问题

    发现是因为mysql表名不能为  x_x_x 这样的形式,最多只能有一个下划线,不能有多个,否则会找不到数据,进而导致空指针异常 上面的被推翻了,发现原来是因为没有注入mapper才导致空指针异常! ...

  10. boot,rebuild,resize,migrate有关的scheduler流程

    代码调用流程: 1. nova.scheduler.client.query.SchedulerQueryClient#select_destinations 2. nova.scheduler.rp ...