vue学习笔记-9-tab选项卡小案例

最新推荐文章于 2022-12-04 13:21:29 发布

笑道三千

最新推荐文章于 2022-12-04 13:21:29 发布

阅读量197

点赞数

分类专栏： # vue基础

本文链接：https://blog.csdn.net/weixin_42349568/article/details/108203866

版权

vue基础专栏收录该内容

37 篇文章 1 订阅

订阅专栏

一，自己写的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<style type="text/css">
			 #app{
				 width: 400px;
				 margin: 200px auto;
				 border: 1px solid #ccc;
			 }
			.box>ul:first-child{
				display: flex;
				justify-content: space-between;
			}
			.box>ul:first-child>li{
				background: orange;
				line-height: 40px;
				width: 100px;
				text-align: center;
				color: #fff;
				font-size: 14px;
			}
			.box>ul:first-child>li:hover{
				background: rgba(255,165,0,0.5);
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<div class="box">
				<ul>
					<li @mouseenter="mouseenter1">第一张</li>
					<li @mouseenter="mouseenter2">第二张</li>
					<li @mouseenter="mouseenter3">第三张</li>
					<li @mouseenter="mouseenter4">第四张</li>
				</ul>
				<ul>
					<li v-if="val==1"><img src="img/1.jpg"></li>
					<li v-else-if="val==2"><img src="img/2.jpg"></li>
					<li v-else-if="val==3"><img src="img/3.jpeg"></li>
					<li v-else><img src="img/4.jpg"></li>
				</ul>
			</div>
		</div>
		 
		<script type="text/javascript" src="./js/vue.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el: "#app",
				data:{
					val:1
				},
				methods:{
					mouseenter1:function(){
						this.val=1
					},
					mouseenter2:function(){
						this.val=2
					},
					mouseenter3:function(){
						this.val=3
					},
					mouseenter4:function(){
						this.val=4
					}
				}
			})
		</script>
	</body>
</html>

实现的效果：
在这里插入图片描述
二，实际案例中的写法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<style type="text/css">
			 #app{
				 width: 400px;
				 margin: 200px auto;
				 border: 1px solid #ccc;
			 }
			.box>ul:first-child{
				display: flex;
				justify-content: space-between;
			}
			.box>ul:first-child>li{
				background: orange;
				line-height: 40px;
				width: 100px;
				text-align: center;
				color: #fff;
				font-size: 14px;
			}
			.box>ul:first-child>li:hover{
				background: rgba(255,165,0,0.5);
			}
			.box>ul:last-child>li{
				display: none;
			}
			.box>ul:last-child>.current{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="box">
				<ul>
					<li @mouseenter="mouseenter(index)" v-for="(item,index) in list">{{item.title}}</li>
					<!-- 通过mouseenter(index)把index参数传入，获取哪个被点击 -->
				</ul>
				<ul>
					<li v-bind:class=currenIndex==index?"current":""   v-for="(item,index) in list"><img :src="item.path"></li>
					<!-- 三目运算，给index对应的img添加显示的样式 -->
				</ul>
			</div>
		</div>
		 
		<script type="text/javascript" src="./js/vue.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el: "#app",
				data:{
					currenIndex: 0,
					list:[{
						id:1,
						title:"第一张",
						path:"img/1.jpg"
					},
					{
						id:2,
						title:"第二张",
						path:"img/2.jpg"
					},
					{
						id:3,
						title:"第三张",
						path:"img/3.jpeg"
					},
					{
						id:4,
						title:"第四张",
						path:"img/4.jpg"
					}]
				},
				methods:{
					mouseenter:function(index){
						this.currenIndex=index
						//这是本案例的重点，把按钮处的索引做参数导入，
						//由此建立起两个模块间的联系（可以知道哪个被点击，哪个被就应该对应显示）
					}
				}
				
			})
		</script>
	</body>
</html>