vue Tab切换小实例-CSDN博客

记录日常使用vue的一些小方法，话不多说直接上代码第一种方式

<!DOCTYPE html>
<html>
    <head>
	    <meta charset="UTF-8">
		<title>vue导航切换</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#main{
			    width:460px;
			    margin:0 auto;
			    text-align:center;
			}
			nav{
				display:inline-block;
				margin:60px auto 45px;
				background-color:#5597b4;
				box-shadow:0 1px 1px #ccc;
				border-radius:2px;
			}
			nav a{
				display:inline-block;
				padding: 18px 30px;
				color:#fff !important;
				font-weight:bold;
				font-size:16px;
				text-decoration:none !important;
				line-height:1;
				background-color:transparent;
				-webkit-transition:background-color 0.25s;
				-moz-transition:background-color 0.25s;
				transition:background-color 0.25s;
			    cursor:pointer;
			}
			b{
			    display:inline-block;
				padding:5px 10px;
				background-color:#c4d7e0;
				border-radius:2px;
				font-size:18px;
			}
			.show{
			    background-color:#e35885;
			}
		</style>
	</head>
	<body>
		<div id="main">
		    <nav @click.prevent>
		        <a v-for="(item,index) in items" :class="{'show': item.active}" @click="makeActive(item, index)">{{item.name}}</a>
		    </nav>
		    <p>You chose <b>{{active}}</b></p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#main',
			    data:{
			    	active:'CSS',
			    	items:[
			        	{name:'HTML', active:false},
			            {name:'CSS', active:true},
			            {name:'JavaScript', active:false},
			            {name:'Vue.js', active:false}
			        ]
			    },
			    methods: {
					makeActive: function(item, index){
						this.active = item.name;
			            for(var i=0; i<this.items.length;i++){
			            	this.items[i].active = false;
			            }
			            this.items[index].active = true;
					}
				}
			});
		</script>
	</body>
</html>

复制代码

效果图如下

第二种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vueTab选项卡</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name='viewprot' content='width=device-width,minmum-scale=1.0,maxmum-scale=1.0'>
		<style type="text/css">
			body{
				font-family: "微软雅黑";
			}
			a{
				text-decoration: none;
			}
			.tabNav{
				overflow: hidden;
			}
			.tabNav a{
				float: left;
				width: auto;
				padding: 0 10px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				cursor: pointer;
				background: #28A4C9;
				color: #FFFFFF;
			}
			.tabNav a.activeA{
				background: #23527C;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="tabNav">
				<a href="javascript:;" @click="curIndex=0" :class="{'activeA':curIndex===0}">HTML</a>
				<a href="javascript:;" @click="curIndex=1" :class="{'activeA':curIndex===1}">CSS</a>
				<a href="javascript:;" @click="curIndex=2" :class="{'activeA':curIndex===2}">Javascript</a>
				<a href="javascript:;" @click="curIndex=3" :class="{'activeA':curIndex===3}">Vue</a>
			</div>
			<div class="tabCon">
				<div v-if="curIndex==0">
					html
				</div>
				<div v-if="curIndex==1">
					css
				</div>
				<div v-if="curIndex==2">
					javascript
				</div>
				<div v-if="curIndex==3">
					vue
				</div>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					curIndex:0
				}
			});
		</script>
	</body>
</html>

复制代码