Vue 选项卡和 js 选项卡

<style type="text/css">
	li{margin: 20px;list-style: none;}
	
	div {margin: 20px;}
	.s {display: none;}
</style>
<body>
	<ul>
		<li id="one1" onclick="setTab('one',1,3)" class="hover">个人首页</li>
		<li id="one2" onclick="setTab('one',2,3)">个人信息</li>
		<li id="one3" onclick="setTab('one',3,3)">个人动态</li>
	</ul>
	<div id="con_one_1" >这是个人首页</div>
	<div id="con_one_2" class="s">这是个人信息</div>
	<div id="con_one_3" class="s">这是个人动态</div>
</body>
<script type="text/javascript">
	function setTab(name,cursel,n){
		for(i=1;i<=n;i++){
			var menu=document.getElementById(name+i);
			var con=document.getElementById("con_"+name+"_"+i);
			menu.className=i==cursel?"hover":"";
			con.style.display=i==cursel?"block":"none";
			
		}
	}
</script>

　　js的选项卡

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<style type="text/css">
		li{list-style: none;  80px;height: 30px;line-height: 30px;display: inline-block;background-color: #ccc;text-align: center;margin: 5px;}
		.hover{background-color: gray;color: #fff;}
		#div1{ 400px;height: 400px;background-color: darkgray;}
	</style>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in list" v-bind:class="{hover:index==isok}" @click="isok=index">
					{{item.name}}
				</li>
				
			</ul>
			<div v-for="(item,index) in con" id="div1" v-show="isok==index">
			       {{item}}
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var vue=new Vue({
			el:"#app",
			data:{
				isok:0,
				list:[
				{name:"个人主页"},
				{name:"个人动态"},
				{name:"个人相册"},
				],  //数组
				con:["这是个人首页","这是个人动态","这是个人相册"]   //数组
			}
			
		})
	</script>

　　Vue 选项卡