<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Tabs</title>

    <style>

       .active{

            background: #f00;

       }

    </style>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>

<div id="app">

    <ul>

        <li @click="toggle(index ,tab.view)" v-for="(tab,index) in tabs" :class="{active:active===index}">

              {{tab.type}}

         </li>

    </ul>

   <component :is="currentView"></component>

</div>

</body>

</html>

<script>

    Vue.component('child1', {

        template: "<p>this is child1</p>"

    })

    Vue.component('child2', {

        template: "<p>this is child2</p>"

    })

    new Vue({

        el: "#app",

        data: {

            active: 0,

            currentView: 'child1',

            tabs: [

                {

                    type: 'tab1',

                    view: 'child1'

                },

                {

                    type: 'tab2',

                    view: 'child2'

                }

            ]

        },

        methods: {

            toggle(i, v){

                this.active = i

                this.currentView = v

            }

        }

    })

</script>

演示地址: https://xibushijie.github.io/static/vuetab.html

Vue实现tab选项卡的更多相关文章

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

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

  2. vue 插件tab选项卡(转载)

    <template> <tab :options="tabOpt" :state.sync="stateIndex"></tab& ...

  3. vue实现tab选项卡切换

    上代码: <template>   <div class="push">     //点击按钮     <div class="tab&qu ...

  4. 微信小程序-滚动Tab选项卡

    前言:今天呢 给大家详细讲解一下滚动Tab选项卡:左右可滑动切换的效果,希望对大家做项目时候有用! 以前也遇到过这个,但是没有做记录.转载来源于:https://www.jianshu.com/p/9 ...

  5. 基于CkEditor实现.net在线开发之路（4）快速布局，工具箱，模板载入，tab选项卡简单说明与使用

    上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...

  6. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  7. android tab选项卡的使用

    项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...

  8. js基础练习一之tab选项卡

    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...

  9. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

随机推荐

  1. Python中文词频统计

    以下是关于小说的中文词频统计 这里有三个文件,分别为novel.txt.punctuation.txt.meaningless.txt. 这三个是小说文本.特殊符号和无意义词 Python代码统计词频 ...

  2. Webpack4教程：第一部分，入口、输入和ES6模块

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://wanago.io/2018/07/16/webpack-4-course-par ...

  3. 让自定义view宽高成比例显示

    有时候我们自定义一个View,比如ImageView,我们需要让它宽高按照一定的比例显示,例如在ImageView在GridView中显示,GridView设置了3列,由于ImageVIew的宽度会根 ...

  4. MAC MAMP 中安装配置使用 ThinkPHP

    MAMP PRO 是Mac OS X 平台上经典的本地环境应用 MAMP 的专业版.专门为专业的Web开发人员和程序员轻松地安装和管理自己的开发环境. MAMP这几个首字母代表Mac OS X系统上的 ...

  5. spring学习总结——装配Bean学习四（导入和混合配置）

    情景:在典型的Spring应用中,我们可能会同时使用自动化和显式配置(JavaConfig)或者XML配置,幸好在Spring中,这些配置方案都不是互斥的.你尽可以将JavaConfig的组件扫描和自 ...

  6. Windows WMIC命令使用详解(附实例)

    第一次执行WMIC命令时,Windows首先要安装WMIC,然后显示出WMIC的命令行提示符.在WMIC命令行提示符上,命令以交互的方式执行 执行“wmic”命令启动WMIC命令行环境.这个命令可以在 ...

  7. CentOS.7下安装配置FTP和SFTP服务

    一: FTP Centos7中默认已经安装了sshd服务(sftp), vsftpd需要手动安装 1.安装并启动FTP服务 1.1 安装vsftpd 使用 yum 安装 vsftpd yum inst ...

  8. 第一个 java 程序

    java程序的运行机制 JVM实现了跨平台 JDK > JRE > JVM java Development Kit(JDK)包含:JRE,以及增加编译器和调试器等用于程序开发的文件 Ja ...

  9. EF ORM

    //新增 UserInfo userInfo = new UserInfo(); userInfo.UserName = "YANG"; userInfo.UserPass = & ...

  10. windows10禁用更新方法

    本方法由本人在无意中发现,实测有效 1.第一步 打开文件管理器路径进入到win10的下载更新文件的目录 C:\Windows\SoftwareDistribution ​ 选中Download文件夹 ...