<!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. vue动画及其原理

    1,vue动画的实现原理,主要是通过在不同时期给需要动画的dom元素加上css动画样式 我们以显示和隐藏动画为例 a, 需要动画的dom元素 b,点击时vue控制往vue中加的样式 2,  我们以两张 ...

  2. 探究高级的Kotlin Coroutines知识

    要说程序如何从简单走向复杂, 线程的引入必然功不可没, 当我们期望利用线程来提升程序效能的过程中, 处理线程的方式也发生了从原始时代向科技时代发生了一步一步的进化, 正如我们的Elisha大神所著文章 ...

  3. vue安装和使用

    首先这里记录的是基于安装node.js 的npm安装vue  如果你不是用的node与npm  那就不必往下看了 1.安装node.js这个不多说   百度有很多 2.安装webpack 全局安装we ...

  4. 修改vue element Transfer 穿梭框里内容区的宽度

    <template> <el-transfer v-model="value1" :data="data"></el-transf ...

  5. 【原】Java学习笔记007 - 流程控制

    package cn.temptation; public class Sample01 { public static void main(String[] args) { // for循环 // ...

  6. linux-arm 安装 dotnetcore

    X86或者X64 安装.net core runtime  可以参照   https://www.cnblogs.com/nnhy/p/netcore_centos.html#4122354 而   ...

  7. 本地windows下搭建git的本地服务器

    本地windows下搭建git的本地服务器 准备工作: 本地安装java环境,配置环境变量(略) 下载gitblit文件,百度一大堆 开始第一步: 减压gitblit压缩包到某个目录下,比如我在:H: ...

  8. eclipse 中 git 解决冲突（重点）

    Eclipse 中 GIT 提交代码时的冲突困扰了我很久,说实在的,真的感觉 GIT 太特么难用了,尤其是提交代码时(或许还没习惯吧).特此,写一篇博文记录一下自己使用 GIT 决解冲突的问题,希望能 ...

  9. const关键字到底该怎么用

    原文地址:https://www.yanbinghu.com/2019/01/28/7442.html 前言 我们都知道使用const关键字限定一个变量为只读,但它是真正意义上的只读吗?实际中又该如何 ...

  10. c#语法学习

    自动属性.隐试类型.命名参数和自动初始化器. note:这里说的这些,是语法糖.按照一定的格式写,部分代码编译器帮我们实现了, 1.自动属性:自动属性是非常有用的语法糖,帮我我们做了两件事:1.自动帮 ...