【无标题】

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量64

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/2203_75865923/article/details/129687211

版权

这篇文章展示了如何在Vue.js环境中导入图片，通过div布局和弹性布局使图片排列整齐。利用v-for循环和组件化，为每个图片创建一个可点击的div，结合v-show指令实现在点击后图片的隐藏和显示效果。通过这种方法，可以更简洁地管理大量图片并提供交互体验。

摘要由CSDN通过智能技术生成

1 导入并连接vue.js文件，将图片导入img文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>

2 先写一个div标签，给一个id为app,然后再id为app的div标签中再写一个div标签，然后class为content，content里边为放置的图片

<body>
		<div id="app">
			<div class="content">
				<aa_img v-for="i in imgs" :im="i"></aa_img>
			</div>
			
		</div>
	</body>

3 为div设置样式的时候可以采用弹性布局，可以快速很方便的将图片排列整齐

<style>
			.content{
				width: 1560px;
				margin: 0 auto;
				border: 1px solid skyblue;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
			}
			.item{
				height: 100px;
				width: 150px;
				background-color: #ccc;
				margin: 3px 0px;
			}
			img{
				height: 100px;
				width: 150px;
			}
		</style>

4 通过给每一个图片所放置的div设置一个@click事件和v-show指令来实现图片点击后隐藏和显示的效果，当页面不整洁时，可以通过使用组件来解决

	<body>
		<div id="app">
			<div class="content">
				<aa_img v-for="i in imgs" :im="i"></aa_img>
			</div>
			
		</div>
	</body>
	<template id="test">
		<div class="item" @click="change">
			<img :src="im" v-show="show"/>
		</div>
		
	</template>

<script>
		Vue.component("aa_img",{
			template:"#test",
			props:["im"],
			data:function(){
				return{
					show:true
				}
			},
			methods:{
				change:function(){
					this.show = !this.show;
				}
			}
		})
		var vm = new Vue({
			el:"#app",
			data:{
				imgs:["img/易烊千玺_01.jpg","img/易烊千玺_02.jpg","img/易烊千玺_03.jpg","img/易烊千玺_04.jpg","img/易烊千玺_05.jpg","img/易烊千玺_06.jpg","img/易烊千玺_07.jpg","img/易烊千玺_08.jpg","img/易烊千玺_09.jpg","img/易烊千玺_10.jpg","img/易烊千玺_11.jpg","img/易烊千玺_12.jpg","img/易烊千玺_13.jpg","img/易烊千玺_14.jpg","img/易烊千玺_15.jpg","img/易烊千玺_16.jpg","img/易烊千玺_17.jpg","img/易烊千玺_18.jpg","img/易烊千玺_19.jpg","img/易烊千玺_20.jpg","img/易烊千玺_21.jpg","img/易烊千玺_22.jpg","img/易烊千玺_23.jpg","img/易烊千玺_24.jpg","img/易烊千玺_25.jpg","img/易烊千玺_26.jpg","img/易烊千玺_27.jpg","img/易烊千玺_28.jpg","img/易烊千玺_29.jpg","img/易烊千玺_30.jpg","img/易烊千玺_31.jpg","img/易烊千玺_32.jpg","img/易烊千玺_33.jpg","img/易烊千玺_34.jpg","img/易烊千玺_35.jpg","img/易烊千玺_36.jpg","img/易烊千玺_37.jpg","img/易烊千玺_38.jpg","img/易烊千玺_39.jpg","img/易烊千玺_40.jpg","img/易烊千玺_41.jpg","img/易烊千玺_42.jpg","img/易烊千玺_43.jpg","img/易烊千玺_44.jpg","img/易烊千玺_45.jpg","img/易烊千玺_46.jpg","img/易烊千玺_47.jpg","img/易烊千玺_48.jpg","img/易烊千玺_49.jpg","img/易烊千玺_50.jpg","img/易烊千玺_51.jpg","img/易烊千玺_52.jpg","img/易烊千玺_53.jpg","img/易烊千玺_54.jpg","img/易烊千玺_55.jpg","img/易烊千玺_56.jpg","img/易烊千玺_57.jpg","img/易烊千玺_58.jpg","img/易烊千玺_59.jpg","img/易烊千玺_60.jpg","img/易烊千玺_61.jpg","img/易烊千玺_62.jpg","img/易烊千玺_63.jpg","img/易烊千玺_64.jpg","img/易烊千玺_65.jpg","img/易烊千玺_66.jpg","img/易烊千玺_67.jpg","img/易烊千玺_68.jpg","img/易烊千玺_69.jpg","img/易烊千玺_70.jpg","img/易烊千玺_71.jpg","img/易烊千玺_72.jpg","img/易烊千玺_73.jpg","img/易烊千玺_74.jpg","img/易烊千玺_75.jpg","img/易烊千玺_76.jpg","img/易烊千玺_77.jpg","img/易烊千玺_78.jpg","img/易烊千玺_79.jpg","img/易烊千玺_80.jpg","img/易烊千玺_81.jpg","img/易烊千玺_82.jpg","img/易烊千玺_83.jpg","img/易烊千玺_84.jpg","img/易烊千玺_85.jpg","img/易烊千玺_86.jpg","img/易烊千玺_87.jpg","img/易烊千玺_88.jpg","img/易烊千玺_89.jpg","img/易烊千玺_90.jpg","img/易烊千玺_91.jpg","img/易烊千玺_92.jpg","img/易烊千玺_93.jpg","img/易烊千玺_94.jpg","img/易烊千玺_95.jpg","img/易烊千玺_96.jpg","img/易烊千玺_97.jpg","img/易烊千玺_98.jpg","img/易烊千玺_99.jpg","img/易烊千玺_100.jpg"]
				}
		});
	</script>

5 在template标签中就为每一个图片添加了click事件和v-show指令，使用组件后我们把代码变简洁了

<template id="test">
		<div class="item" @click="change">
			<img :src="im" v-show="show"/>
		</div>
		
	</template>
	<script>
		Vue.component("aa_img",{
			template:"#test",
			props:["im"],
			data:function(){
				return{
					show:true
				}
			},
			methods:{
				change:function(){
					this.show = !this.show;
				}
			}

6 图片点击后显示和隐藏主要通过这个表达式

		methods:{
				change:function(){
					this.show = !this.show;
				}
			}

7 效果

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【无标题】

2 先写一个div标签，给一个id为app,然后再id为app的div标签中再写一个div标签，然后class为content，content里边为放置的图片。5 在template标签中就为每一个图片添加了click事件和v-show指令，使用组件后我们把代码变简洁了。指令来实现图片点击后隐藏和显示的效果，当页面不整洁时，可以通过使用组件来解决。3 为div设置样式的时候可以采用弹性布局，可以快速很方便的将图片排列整齐。4 通过给每一个图片所放置的div设置一个@click事件和。
复制链接

扫一扫