vue实现简单选项卡

最新推荐文章于 2024-04-11 11:03:20 发布

失忆症患者_

最新推荐文章于 2024-04-11 11:03:20 发布

阅读量256

点赞数

分类专栏： vue基础文章标签： css javascript vue.js html

本文链接：https://blog.csdn.net/qq_41929578/article/details/108931495

版权

vue基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

tab选项卡（简单版）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js"></script>
		<style type="text/css">
			.tab ul li{
				display: inline-block;
				list-style: none;
				margin-left: 20px;
				width: 100px;
				height: 50px;
				border: 1px solid #FFFF00;
				text-align: center;
				line-height: 50px;
			}
			.tab div{
				display: none;
			}
			.tab div.current{
				display: block;
			}
			/*.tab li.active{
				background-color: pink;
			}*/
			.active{
				background-color: pink;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<div class="tab">
				<ul>
					<li v-bind:class='currentIndex==index?"active":""' v-on:click="handle(index)" :key="item.id" v-for="(item,index) in list">{{item.uname}}</li>
				</ul>
				<div v-bind:class='currentIndex==index?"current":""' :key="item.id" v-for="(item,index) in list" >
					<img :src="item.src"/>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					currentIndex:0,
					list:[
						{
							id:1,
							uname:"apple",
							src:"../../../底部选项卡/images/cbd.jpg"
						},
						{
							id:2,
							uname:"banana",
							src:"../../../底部选项卡/images/yuantiao.jpg"
						},
						{
							id:3,
							uname:"lemon",
							src:"../../../底部选项卡/images/cbd.jpg"
						},
					]
				},
				methods:{
					handle:function(index){
						this.currentIndex = index;
					}
				}
			})
		</script>
	</body>
</html>