<div id='test'>
<ul class="nav" >
<li v-for='(item,index) in dataNav' @click='tabClick(item,index)' :class='{active:actives==index}'>{{item}}</li>
</ul>
<div>
<component :is='view'></component>
</div>
</div>

var test1 = Vue.component('test1',{
template:'<p>test1</p>'
})
var test2 = Vue.component('test2',{
template:'<p>test2</p>'
})
var test3 = Vue.component('test3',{
template:'<p>test3</p>'
})
var test4 = Vue.component('test4',{
template:'<p>test4</p>'
})
var test = new Vue({
el:'#test',
data:{
dataNav:[
'test1',
'test2',
'test3',
'test4'
],
actives:0,
view:'test1'
},
components:{
test1:test1,
test2:test2,
test3:test3,
test4:test4
},
methods:{
tabClick:function(val,index){
this.actives = index;
this.view = val;
}
}
})

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

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

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

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

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

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

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

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

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

  5. android tab选项卡的使用

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

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

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

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

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

  8. 工作当中实际运用(1)——tab选项卡

    不废话 直接上代码: tab选项卡 window.onload=function(){ var titles= document.getElementById('header-dh').getElem ...

  9. 各种效果的tab选项卡

    ;(function($){ $.fn.tabso=function( options ){ var opts=$.extend({},$.fn.tabso.defaults,options ); r ...

  10. (2)WinForm中改变Tab选项卡的顺序

    Tab选项卡选中,在其属性中找到TabPages这个属性.点进去,可以通过上下移动标签卡改变标签卡的顺序.

随机推荐

  1. iOS拍照图片旋转的问题

    很久之前,遇到了这种情况,iOS某端拍照上传到服务器,其他iOS端从服务器下载该照片展示,发现图片逆时针旋转了90度.当时百度了一下,找到一段代码修正image方向,问题解决了,但没有深入理解底层原理 ...

  2. 图像分类中max-pooling和average-pooling之间的异同

    池化操作时在卷积神经网络中经常采用过的一个基本操作,一般在卷积层后面都会接一个池化操作,但是近些年比较主流的ImageNet上的分类算法模型都是使用的max-pooling,很少使用average-p ...

  3. Ubuntu中创建、删除、更改、移动文件的命令

    1.创建一个目录 $ sudo mkdir <目录名>   2.删除一个非空目录下的一切 $ sudo rm -rf <目录名>   3.将文件file1,更改文件名为file ...

  4. 数据库设计理论与实践·<三>物理设计

    一.物理设计核心任务与关键细节 二.物理设计经验之谈 1.数据类型的设计:建议字段数据类型定义时结合以下几点(以MYSQL为例) 1)不适用image,而使用varbinary等 2)不使用text和 ...

  5. PHP7语法知识(一):语言基础

    一.数据类型 1.字符串: 2.整形: var_dump函数:返回变量的数据类型和值. 3.浮点型: 4.布尔型: 5.数组: 6.对象: 7.NULL值 二.运算符 1.算术运算符: 2.递增递减运 ...

  6. 安装LDAP用户认证

    LDAP伺服器设定 1.安装 openldap-servers yum -y install openldap openldap-devel openldap-servers 2.建立 LDAP 密码 ...

  7. 帮助类-从tfs获取数据

    using JC.Helper; using Microsoft.TeamFoundation.Client; using Microsoft.TeamFoundation.Framework.Cli ...

  8. 安装.src.rpm

    .src.rpm在坟墓镜像中能找到,例如6.8 os 的rpm包的.src.rpm格式就存放在http://vault.centos.org/6.8/os/Source/ .src.rpm是源码包,是 ...

  9. Service Mesh

    概念 A service mesh is a dedicated infrastructure layer for handling service-to-service communication. ...

  10. Java学习过程中要记录的地方--汇总

    1.Map的子类 HashMap 是哈希表,根据哈希算法来存的,取出来不一定是按照原来的循序: Ctrl+T 可以看到 HashMap下面有 LinkHashMap 是线性实现的,里面有顺序. --- ...