基础vue实现简单的选项卡功能

57 阅读 0 评论 38 点赞

我是靠谱客的博主潇洒航空，最近开发中收集的这篇文章主要介绍基础vue实现简单的选项卡功能，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

选项卡是前端常见的一种形式。
在一个页面中实现多内容的切换。在实际的应用中也是比较常见的。
对于vue初学者来说，这样的页面也是练手的好题目。下面一组代码，就能够实现基础的选项卡功能。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			ul>li{
				float: left;
				width: 200px;
				text-align: center;
				line-height: 30px;
			}
			.current{
				background:#f60;
			}

			ul{
				overflow: hidden;
				margin-bottom: 20px;
			}
			section>div{
				width: 800px;
				line-height: 80px;
				text-align: center;
				border: 1px solid #000;
			}

		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<!-- vue重点就是操作数据 -->
				<!-- 可以让变量num和index关联起来 -->
				<li v-for="(i,index) in toplist" v-bind:class="{current:num==index}" v-on:click="change(index)">{{i}}</li>
			</ul>
			<section>
				<div v-for="(i,index) in con" v-show="num==index">{{i}}</div>
			</section>
		</div>

		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					num:0,
					toplist:['头条','娱乐','新闻','游戏','视频','音乐'],
					con:['头条内容','娱乐内容','新闻内容','游戏内容','视频内容','音乐内容']
				},
				methods:{
					change(a){
						this.num=a;
					}
				}
			})
		</script>
	</body>
</html>