Vue点击显示不同的图片

最新推荐文章于 2024-10-16 16:14:40 发布

潔19

最新推荐文章于 2024-10-16 16:14:40 发布

阅读量2.7k

点赞数 2

本文链接：https://blog.csdn.net/weixin_41909712/article/details/87940238

版权

使用Vue中的以下知识点来显示效果
①：v-for：循环遍历数据
②：v-bind:class={ }：绑定样式
③：v-on:click（简写@click）：点击事件
④：v-if：判断

<!DOCTYPE html>
<html>
<head>
	<title>点击显示相对应的图片</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.myul{
			display: flex;
		}
		.myul li{
			border: 1px solid orange;
			height: 150px;
			width: 150px;
			flex-direction: row;
			text-align: center;
			line-height: 150px;
		}
		.content{
			border: 1px solid grey;
			height: 350px;
			width: 600px;
		}
		.content img{
			height: 350px;
			width: 600px;
		}
		.active{
			background: #3A9ffb;
			color: white;
		}
	</style>
</head>
<body>
	<div class="app">
		<div class="title">
			<ul class="myul">
				<li v-for="(item,index) in mess" v-bind:class="{ 'active': status === index}" v-on:click="changeImg(index)">
					{{item.content}}
				</li>
			</ul>
		</div>
		<div class="content">
			<img src="img/1.jpg" v-if="status === 0">
			<img src="img/2.jpg" v-if="status === 1">
			<img src="img/84.jpg" v-if="status === 2">
			<img src="img/85.jpg" v-if="status === 3">
		</div>
	</div>
</body>
</html>
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el:".app",
		data:{
			status:0,   //状态显示
			mess:[
				{id:0,content:"点击显示图片一"},
				{id:1,content:"点击显示图片二"},
				{id:2,content:"点击显示图片三"},
				{id:3,content:"点击显示图片四"}
			]
		},
		methods:{
			changeImg:function(index){
				this.status=index;
			}
		}
	})
</script>