Vue 及自定义组件完成 10x10 图片表格的点击效果

瓶372

已于 2023-03-27 22:19:26 修改

阅读量213

点赞数

文章标签： vue.js 前端 javascript

于 2023-03-18 11:57:43 首次发布

本文链接：https://blog.csdn.net/qq_73343365/article/details/129634103

版权

该代码示例展示了如何在Vue.js中创建自定义组件，组件包含props、data、methods和template，用于处理图片的显示和隐藏。当点击盒子时，图片会通过v-show指令切换显示状态。整个布局采用flexbox进行调整，图片路径存储在Vue实例的数据对象中，并通过v-for循环渲染多个自定义组件。

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

首先引入vue.js

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

创建两个div，content用来调整盒子格式

.content {
				width: 850px;
				border: 1px solid pink;
				margin: 0 auto;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
			}

自定义组件

1.props：自定义属性

2.data：图片的地址和显示

3.methods：此方法为点击盒子进行show的取反，实现隐藏图片的效果

4.template：定义组件长什么样子

Vue.component("test-div", {
				template: '#temp',
				props: ["im"],
				data: function() {
					return {
						show: true,
						img: "img/1679045742670_01.gif",
					}
				},
				
				methods: {
					change: function() {
						this.show = !this.show
					}
				}
			});

自定义组件的使用

1.@click：完成盒子点击事件的效果

2.v-show：实现点击盒子进行show的取反

<template id="temp">
	<div class="item" @click="change">
		<img :src="im" v-show="show" />
	</div>
</template>

调整图片，项目大小和间距

.item {
	width: 80px;
	height: 45px;
	margin: 2px 0px;
	background-color: pink;
}

img {
	width: 80px;
	height: 45px;
}

Vue实例化

1.el：作用范围

2.data:定义一个储存路径的数组

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

				}

效果图

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.content {
				width: 850px;
				border: 1px solid pink;
				margin: 0 auto;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
			}

			.item {
				width: 80px;
				height: 45px;
				margin: 2px 0px;
				background-color: pink;
			}

			img {
				width: 80px;
				height: 45px;
			}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div class="content">
				<test-div v-for="i in imgs" :im="i"></test-div>
			</div>
		</div>
		<template id="temp">
			<div class="item" @click="change">
				<img :src="im" v-show="show" />
				
			</div>
		</template>
		<script>
			Vue.component("test-div", {
				template: '#temp',
				props: ["im"],
				data: function() {
					return {
						show: true,
						img: "img/1679045742670_01.gif",
					}
				},
				
				methods: {
					change: function() {
						this.show = !this.show
					}
				}
			});
			var vm = new Vue({
				el: "#app",
				data: {
					imgs: ["img/1679045742670_01.gif", "img/1679045742670_02.gif", "img/1679045742670_03.gif",
						"img/1679045742670_04.gif", "img/1679045742670_05.gif", "img/1679045742670_06.gif",
						"img/1679045742670_07.gif", "img/1679045742670_08.gif", "img/1679045742670_09.gif",
						"img/1679045742670_10.gif", "img/1679045742670_11.gif", "img/1679045742670_12.gif",
						"img/1679045742670_13.gif", "img/1679045742670_14.gif", "img/1679045742670_15.gif",
						"img/1679045742670_16.gif", "img/1679045742670_17.gif", "img/1679045742670_18.gif",
						"img/1679045742670_19.gif", "img/1679045742670_20.gif", "img/1679045742670_21.gif",
						"img/1679045742670_22.gif", "img/1679045742670_23.gif", "img/1679045742670_24.gif",
						"img/1679045742670_25.gif", "img/1679045742670_26.gif", "img/1679045742670_27.gif",
						"img/1679045742670_28.gif", "img/1679045742670_29.gif", "img/1679045742670_30.gif",
						"img/1679045742670_31.gif", "img/1679045742670_32.gif", "img/1679045742670_33.gif",
						"img/1679045742670_34.gif", "img/1679045742670_35.gif", "img/1679045742670_36.gif",
						"img/1679045742670_37.gif", "img/1679045742670_38.gif", "img/1679045742670_39.gif",
						"img/1679045742670_40.gif", "img/1679045742670_41.gif", "img/1679045742670_42.gif",
						"img/1679045742670_43.gif", "img/1679045742670_44.gif", "img/1679045742670_45.gif",
						"img/1679045742670_46.gif", "img/1679045742670_47.gif", "img/1679045742670_48.gif",
						"img/1679045742670_49.gif", "img/1679045742670_50.gif", "img/1679045742670_51.gif",
						"img/1679045742670_52.gif", "img/1679045742670_53.gif", "img/1679045742670_54.gif",
						"img/1679045742670_55.gif", "img/1679045742670_56.gif", "img/1679045742670_57.gif",
						"img/1679045742670_58.gif", "img/1679045742670_59.gif", "img/1679045742670_60.gif",
						"img/1679045742670_61.gif", "img/1679045742670_62.gif", "img/1679045742670_63.gif",
						"img/1679045742670_64.gif", "img/1679045742670_65.gif", "img/1679045742670_66.gif",
						"img/1679045742670_67.gif", "img/1679045742670_68.gif", "img/1679045742670_69.gif",
						"img/1679045742670_70.gif", "img/1679045742670_71.gif", "img/1679045742670_72.gif",
						"img/1679045742670_73.gif", "img/1679045742670_74.gif", "img/1679045742670_75.gif",
						"img/1679045742670_76.gif", "img/1679045742670_77.gif", "img/1679045742670_78.gif",
						"img/1679045742670_79.gif", "img/1679045742670_80.gif", "img/1679045742670_81.gif",
						"img/1679045742670_82.gif", "img/1679045742670_83.gif", "img/1679045742670_84.gif",
						"img/1679045742670_85.gif", "img/1679045742670_86.gif", "img/1679045742670_87.gif",
						"img/1679045742670_88.gif", "img/1679045742670_89.gif", "img/1679045742670_90.gif",
						"img/1679045742670_91.gif", "img/1679045742670_92.gif", "img/1679045742670_93.gif",
						"img/1679045742670_94.gif", "img/1679045742670_95.gif", "img/1679045742670_96.gif",
						"img/1679045742670_97.gif", "img/1679045742670_98.gif", "img/1679045742670_99.gif",
						"img/1679045742670_100.gif"
					]

				}
			})
		</script>
	</body>
</html>