Vue-tab选项卡
<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选项卡的更多相关文章
- vue实现tab选项卡切换效果
tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...
- 微信小程序-滚动Tab选项卡
前言:今天呢 给大家详细讲解一下滚动Tab选项卡:左右可滑动切换的效果,希望对大家做项目时候有用! 以前也遇到过这个,但是没有做记录.转载来源于:https://www.jianshu.com/p/9 ...
- 基于CkEditor实现.net在线开发之路(4)快速布局,工具箱,模板载入,tab选项卡简单说明与使用
上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...
- 可轮播滚动的Tab选项卡
前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...
- android tab选项卡的使用
项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...
- js基础练习一之tab选项卡
最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...
- :target伪类制作tab选项卡
:target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...
- 工作当中实际运用(1)——tab选项卡
不废话 直接上代码: tab选项卡 window.onload=function(){ var titles= document.getElementById('header-dh').getElem ...
- 各种效果的tab选项卡
;(function($){ $.fn.tabso=function( options ){ var opts=$.extend({},$.fn.tabso.defaults,options ); r ...
- (2)WinForm中改变Tab选项卡的顺序
Tab选项卡选中,在其属性中找到TabPages这个属性.点进去,可以通过上下移动标签卡改变标签卡的顺序.
随机推荐
- 三十九、Linux 线程——线程的同步和互斥
39.1 概念 线程同步 是一个宏观概念,在微观上包含线程的相互排斥和线程先后执行的约束问题 解决同步方式 条件变量 线程信号量 线程互斥 线程执行的相互排斥 解决互斥的方式 互斥锁 读写锁 线程信号 ...
- SqlServer 左右内连接
- python-文件读写操作
打开文件: f=open('test.txt',mode='r',encoding='utf-8') 参数1 文件名,若非当前路径,需指出具体路径 参数2 mode: 文件打开模式 r ...
- linux一些比较重要的环境变量。配置文件
永久添加环境变量PATH 方法一:编辑/etc/profile.d/NAME.sh 写入这句话export PATH=/PATH/TO/SOMEWHRER:$PATH 永久修改动态库文件搜索路径 方法 ...
- Python内建函数-callable
Python内建函数-callable callable(object) 中文说明:检查对象object是否可调用.如果返回True,object仍然可能调用失败:但如果返回False,调用对象ojb ...
- web应用与http协议
web应用 Web应用程序是一种可以通过web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件. 应用程序有两种模式C/S.B/S.C/S是客户端/ ...
- gprof使用介绍【转】
转自:https://blog.csdn.net/linquidx/article/details/5916701 gprof 1.1 简介 gprof实际上只是一个用于读取profile结 ...
- MySQL如何启用密码强度审计【转】
1.密码验证插件安装 要使服务器可以使用,插件库文件必须位于MySQL插件目录(plugin_dir系统变量指定的目录)中.如有必要,请设置plugin_dir服务器启动时的值, 以告知服务器插件目录 ...
- DUILIB入门简明教程
电子书下载: DUILIB入门简明教程.chm 文章作者: Alberl 电子书制作: 邓学彬 目录: 2013 duilib入门简明教程 -- 前言(1) 2013 duilib入门简明教程 ...
- IOS应用内嵌cocos2dx游戏项目
1.创建Cocos2d-x项目 相比于Android来说cocos2dx的iPhone环境基本不用配置,直接创建用xcode打开就可以运行. 到Cocos2d-x官方网站下载最新版本引擎. 将刚才下载 ...