文档章节

Vue实现简单选项卡

wftt
 wftt
发布于 2018/02/06 15:50
字数 228
阅读 623
收藏 0
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#tab{
			width:600px;
			margin:0 auto;
		}
		.tab_title{
			font-size:0;     /*有间隙*/
			width:600px;
		}
		.tab_title a{
			display: inline-block;
			height:40px;
			line-height: 40px;
			font-size:16px;
			width:25%;
			text-align: center;
			background: #ccc;
			color:#333;
			text-decoration: none;
		}
		.tab_title .cur{
			background:#09f;
			color:#fff;
		}
		.tab_content div{
			border:1px solid #ccc;
			height:400px;
			padding-top:20px;
		}
	</style>
</head>
<body>
	<div id="tab">
		<!-- 导航 -->
		<div class="tab_title">
			<!-- 点击设置curId的值 -->
			<a href="#" :class="{'cur':curId === 0}" @click="curId=0">Home</a>
			<a href="#" :class="{'cur':curId === 1}" @click="curId=1">About</a>
			<a href="#" :class="{'cur':curId === 2}" @click="curId=2">Contact</a>
			<a href="#" :class="{'cur':curId === 3}" @click="curId=3">MySpace</a>
		</div>
		<!-- 内容 -->
		<div class="tab_content">
			<!-- 根据curId的值显示div,分别对应 -->
			<div v-show="curId===0">Home Content</div>
			<div v-show="curId===1">About Content</div>
			<div v-show="curId===2">Contact Content</div>
			<div v-show="curId===3">MySpace Content</div>
		</div>
	</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<script>
	var v = new Vue({
		el:'#tab',
		data:{
			curId:0
		},
		computed:{},
		methods:{},
		mounted:function(){}
	})
</script>
</html>

 

© 著作权归作者所有

wftt
粉丝 11
博文 38
码字总数 24507
作品 0
海淀
前端工程师
私信 提问
当大多数人对Vue理解到炉火纯青的时候,是不是该思考一下怎么让vue页面骚气起来

写在前面 当大多数人Vue理解的炉火纯青的时候,你应该思考怎么让vue页面骚气起来,下面就我个人在接触Vue两年的时间里,在实际工作中门户网站在前端页面交互应用和技巧,炒几道“小菜”给大家...

codercao
2018/08/16
0
0
当大多数人对Vue理解到炉火纯青的时候,你应该思考怎么让vue页面骚气起来

写在前面 当大多数人Vue理解的炉火纯青的时候,你应该思考怎么让vue页面骚气起来,下面就我个人在接触Vue两年的时间里,在实际工作中门户网站在前端页面交互应用和技巧,炒几道“小菜”给大家...

codercao
2018/08/16
0
0
2018 我所了解的 Vue 知识大全

年初第一个 flag 就是掌握 vue ,哈哈! Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的学习曲线平稳很...

cacao111
2018/07/11
0
0
深入剖析Vue源码 - 选项合并(下)

上一节深入剖析Vue源码 - 选项合并(上)的末尾,我们介绍了Vue中处理合并选项的思路,概括起来主要有两点,一是当选项存在定义好的默认配置策略时,优先选择默认配置策略,并且根据不同的配置...

不做祖国的韭菜
03/20
0
0
Vue.js 优雅地集成第三方 JavaScript

原文地址:Sliding In And Out Of Vue.js 原文作者:Kevin Ball 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:LucaslEliane 校对者:Mcskiller, SevenOutman Vue....

LucasTwilight
03/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CSS--列表

一、列表标识项 list-style-type none:去掉标识项 disc:默认实心圆 circle:空心圆 squire:矩形 二、列表项图片 list-style-img: 取值:url(路径) 三、列表项位置 list-style-position:...

wytao1995
今天
4
0
linux 命令-文本比较comm、diff、patch

本文原创首发于公众号:编程三分钟 今天学了三个文本比较的命令分享给大家。 comm comm 命令比较相同的文本 $ cat charabc$ cat chardiffadc 比如,我有两个文件char和chardiff如上,...

编程三分钟
今天
7
0
QML教程

https://blog.csdn.net/qq_40194498/article/category/7580030 https://blog.csdn.net/LaineGates/article/details/50887765...

shzwork
今天
5
0
HA Cluster之5

对于使用heartbeat v2版的CRM配置的集群信息都是保存在一个名为cib.xml的配置文件中,存放在/var/lib/heartbeat/crm/下。CIB:Cluster Information Base,由于xml文件配置不是那么方便,所以...

lhdzw
今天
6
0
玩转Redis-Redis基础数据结构及核心命令

  《玩转Redis》系列文章主要讲述Redis的基础及中高级应用,文章基于Redis5.0.4+。本文主要讲述Redis的数据结构String,《玩转Redis-Redis基础数据结构及核心命令》相关操作命令为方便对比...

zxiaofan666
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部