Vue-选项卡切换
<html>
<head>
<title>Vue实现tab切换效果</title>
<script src="vue.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
} #tab{
width:368px;
height:200px;
border:1px solid #ccc;
margin:20px auto;
} ul li {
float:left;
list-style:none;
width:90px;
height:30px;
text-align:center;
line-height:30px;
border:1px solid #ccc;
} ul li:hover{
cursor:pointer
} .active {
color:red;
} .tabCon {
clear:left;
padding:4px 0 0 6px;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li
v-for="(tab, index) in tabs"
:class="{active:index == nowIndex}"
@click="tabToggle(index)">
{{ tab }}
</li>
</ul>
<div class="tabCon">
<div class="divTab" v-show="nowIndex === 0">内容一</div>
<div class="divTab" v-show="nowIndex === 1">内容二</div>
<div class="divTab" v-show="nowIndex === 2">内容三</div>
<div class="divTab" v-show="nowIndex === 3">内容四</div>
</div>
</div>
<script>
new Vue({
el:"#tab",
data:{
tabs:["新闻排行","图片排行","视频排行","游戏排行"],
nowIndex:0
},
methods:{
tabToggle:function(index){
this.nowIndex = index;
}
}
}) </script>
</body>
</html>
显示如下：
Vue-选项卡切换的更多相关文章
- vue实现选项卡切换效果
效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta chars ...
- vue实现选项卡切换--不用ui库
vue的ui库中基本都有选项卡切换的组件,但是在项目开发过程中却不一定能很好的为我们所用,因为里面的样式和 一些状态并不能很好的根据我们的项目需求进行定制.最近项目中使用的是vant-ui中的标签页, ...
- vue实现tab选项卡切换效果
tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...
- 使用ViewPager+Fragment实现选项卡切换效果
实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...
- 慕课编程题JS选项卡切换
Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
- Android ViewPager实现选项卡切换
ViewPager实现选项卡切换,效果图如下: 步骤一:这里使用兼容低版本的v4包进行布局,这里eclipse没有输入提示,所以要手动输入,文件名称“activity_main.xml” <Re ...
- 7、JavaScript总结——实现选项卡切换的效果
编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 ...
- 基于jquery左侧带选项卡切换的焦点图
今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- 用js实现选项卡切换效果
这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...
随机推荐
- Map.Entry的由来和使用
首先,回忆和练习一下HashMap的遍历 package Exercise.exercise; import java.util.HashMap; import java.util.Iterator; ...
- python中sort与sorted区别
1.sort()函数 (只对list有用) sort(...) L.sort(key = None,reverse=False) key = 函数 这个函数会从每个元素中提取一个用于比较的关键字.默认 ...
- iOS----收集的一些小技巧
1,如何将试图置于最顶层 第一种方法 _myview.layer.zPosition =5; 第二种方法 [self.view insertSubview:_MyView atIndex:999]; ...
- bzoj2460题解
[题意分析] 给你一个可重复数集,要求从中选取一个关于异或空间线性无关的子集,使子集的权值和最大. [解题思路] 定义:一个有序对(S,I)称为拟阵当且仅当该有序对满足以下性质: 1.有穷性:S是一个 ...
- 【HDOJ6641】TDL（数论）
题意:定义f(n,m)是第m小的数字x,使得x>n且gcd(x,n)=1 已知 求最小的n使得 k<=1e18,m<=1e2 思路: #include<bits/stdc++. ...
- Nginx负载均衡与反向代理—《亿级流量网站架构核心技术》
当我们的应用单实例不能支撑用户请求时,此时就需要扩容,从一台服务器扩容到两台.几十台.几百台.然而,用户访问时是通过如http://www.XX.com的方式访问,在请求时,浏览器首先会查询DNS服务 ...
- Nexus Repository OSS 3安装配置使用
Nexus Repository OSS 3是一个开源的仓库管理系统,提供了更加丰富的功能,而且安装.配置.使用起来也更加简单方便.OSS 3版本主要支持的仓库(Repository)包括如下: bo ...
- linux之rpm软件包管理
1.RPM包的命名规则 例如:httpd-2.2.15-15.el6.centos.1.i686.rpm httpd · 软件包名 2.2.15 软件版本 15 ...
- iOS打印各种类型数据
整型占位符说明 : %d : 十进制整数, 正数无符号, 负数有 “-” 符号; %o : 八进制无符号整数, 没有 0 前缀; %x : 十六进制无符号整数, 没有 0x 前缀; %u : 十进制无 ...
- 在Mac OS X 10.11 EI Capitan 中提取iso镜像
到Apple store上下载最新的OS X El Capitan ,下载完成后就可以进行iso镜像提取操作了. 步骤一:挂载El Capitan 的安装镜像文件 1 hdiutil attach / ...