通过vue及自定义组件完成10*10图片表格的点击效果，实现点击隐藏及显示。

以下是全部代码

		<meta charset="utf-8" />
		<title></title>
		<style>
			.content {
				width: 5000px;
				border: 5px solid palevioletred;
				margin: 0 auto;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
			}

			.item {
				height: 362px;
				width: 483px;
				background-color: #ccc;
				margin: 2px 0px;
			}
		</style>

 

通过css来修饰美化图片表格的效果，显示的布局和图片间的间隔。

<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>