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

工具： HBuilder X

Js插件：Vue.js

教程：

首先引入Js插件

<script type="text/javascript" src="js/vue.js"></script>

然后在body里面创建一个id为app的div，在id为app的div里面再创建一个class为content的div用于放置图片

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

在head里面添加style标签，在style标签里面为app ，content两个div设置布局

<style>
	.content{
		width: 1810px;
		margin: 0 auto;
		border: 1px solid skyblue;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
			}
	.item{
		height: 128px;
		width: 171px;
		background-color: #ccc;
		margin: 5px 0px;
		}
</style>

接下来我们在div为"app"的下面或者body的下面创建一个script，定义一个Vue方法并且绑定div为"app"的盒子

var vm = new Vue({
			el:"#app",
			data:{
				imgs:["img/ss_01.jpg ","img/ss_02.jpg ","img/ss_03.jpg ","img/ss_04.jpg ","img/ss_05.jpg ","img/ss_06.jpg ","img/ss_07.jpg ","img/ss_08.jpg ","img/ss_09.jpg ","img/ss_10.jpg ","img/ss_11.jpg ","img/ss_12.jpg ","img/ss_13.jpg ","img/ss_14.jpg ","img/ss_15.jpg ","img/ss_16.jpg ","img/ss_17.jpg ","img/ss_18.jpg ","img/ss_19.jpg ","img/ss_20.jpg ","img/ss_21.jpg ","img/ss_22.jpg ","img/ss_23.jpg ","img/ss_24.jpg ","img/ss_25.jpg ","img/ss_26.jpg ","img/ss_27.jpg ","img/ss_28.jpg ","img/ss_29.jpg ","img/ss_30.jpg ","img/ss_31.jpg ","img/ss_32.jpg ","img/ss_33.jpg ","img/ss_34.jpg ","img/ss_35.jpg ","img/ss_36.jpg ","img/ss_37.jpg ","img/ss_38.jpg ","img/ss_39.jpg ","img/ss_40.jpg ","img/ss_41.jpg ","img/ss_42.jpg ","img/ss_43.jpg ","img/ss_44.jpg ","img/ss_45.jpg ","img/ss_46.jpg ","img/ss_47.jpg ","img/ss_48.jpg ","img/ss_49.jpg ","img/ss_50.jpg ","img/ss_51.jpg ","img/ss_52.jpg ","img/ss_53.jpg ","img/ss_54.jpg ","img/ss_55.jpg ","img/ss_56.jpg ","img/ss_57.jpg ","img/ss_58.jpg ","img/ss_59.jpg ","img/ss_60.jpg ","img/ss_61.jpg ","img/ss_62.jpg ","img/ss_63.jpg ","img/ss_64.jpg ","img/ss_65.jpg ","img/ss_66.jpg ","img/ss_67.jpg ","img/ss_68.jpg ","img/ss_69.jpg ","img/ss_70.jpg ","img/ss_71.jpg ","img/ss_72.jpg ","img/ss_73.jpg ","img/ss_74.jpg ","img/ss_75.jpg ","img/ss_76.jpg ","img/ss_77.jpg ","img/ss_78.jpg ","img/ss_79.jpg ","img/ss_80.jpg ","img/ss_81.jpg ","img/ss_82.jpg ","img/ss_83.jpg ","img/ss_84.jpg ","img/ss_85.jpg ","img/ss_86.jpg ","img/ss_87.jpg ","img/ss_88.jpg ","img/ss_89.jpg ","img/ss_90.jpg ","img/ss_91.jpg ","img/ss_92.jpg ","img/ss_93.jpg ","img/ss_94.jpg ","img/ss_95.jpg ","img/ss_96.jpg ","img/ss_97.jpg ","img/ss_98.jpg ","img/ss_99.jpg ","img/ss_100.jpg"]
				}
		});

然后添加已给的组件，将父组件给子组件进行传值（传图片路径）

<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/ss_01.jpg ","img/ss_02.jpg ","img/ss_03.jpg ","img/ss_04.jpg ","img/ss_05.jpg ","img/ss_06.jpg ","img/ss_07.jpg ","img/ss_08.jpg ","img/ss_09.jpg ","img/ss_10.jpg ","img/ss_11.jpg ","img/ss_12.jpg ","img/ss_13.jpg ","img/ss_14.jpg ","img/ss_15.jpg ","img/ss_16.jpg ","img/ss_17.jpg ","img/ss_18.jpg ","img/ss_19.jpg ","img/ss_20.jpg ","img/ss_21.jpg ","img/ss_22.jpg ","img/ss_23.jpg ","img/ss_24.jpg ","img/ss_25.jpg ","img/ss_26.jpg ","img/ss_27.jpg ","img/ss_28.jpg ","img/ss_29.jpg ","img/ss_30.jpg ","img/ss_31.jpg ","img/ss_32.jpg ","img/ss_33.jpg ","img/ss_34.jpg ","img/ss_35.jpg ","img/ss_36.jpg ","img/ss_37.jpg ","img/ss_38.jpg ","img/ss_39.jpg ","img/ss_40.jpg ","img/ss_41.jpg ","img/ss_42.jpg ","img/ss_43.jpg ","img/ss_44.jpg ","img/ss_45.jpg ","img/ss_46.jpg ","img/ss_47.jpg ","img/ss_48.jpg ","img/ss_49.jpg ","img/ss_50.jpg ","img/ss_51.jpg ","img/ss_52.jpg ","img/ss_53.jpg ","img/ss_54.jpg ","img/ss_55.jpg ","img/ss_56.jpg ","img/ss_57.jpg ","img/ss_58.jpg ","img/ss_59.jpg ","img/ss_60.jpg ","img/ss_61.jpg ","img/ss_62.jpg ","img/ss_63.jpg ","img/ss_64.jpg ","img/ss_65.jpg ","img/ss_66.jpg ","img/ss_67.jpg ","img/ss_68.jpg ","img/ss_69.jpg ","img/ss_70.jpg ","img/ss_71.jpg ","img/ss_72.jpg ","img/ss_73.jpg ","img/ss_74.jpg ","img/ss_75.jpg ","img/ss_76.jpg ","img/ss_77.jpg ","img/ss_78.jpg ","img/ss_79.jpg ","img/ss_80.jpg ","img/ss_81.jpg ","img/ss_82.jpg ","img/ss_83.jpg ","img/ss_84.jpg ","img/ss_85.jpg ","img/ss_86.jpg ","img/ss_87.jpg ","img/ss_88.jpg ","img/ss_89.jpg ","img/ss_90.jpg ","img/ss_91.jpg ","img/ss_92.jpg ","img/ss_93.jpg ","img/ss_94.jpg ","img/ss_95.jpg ","img/ss_96.jpg ","img/ss_97.jpg ","img/ss_98.jpg ","img/ss_99.jpg ","img/ss_100.jpg"]
				}
		});
	</script>

在class为"content"的div里面添加自己定义的"aa_img"，并给它设置V-for循环(给图片传值)

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

在script的data里面传入所有的图片地址，最后运行

data:{
	imgs:["img/ss_01.jpg ","img/ss_02.jpg ","img/ss_03.jpg ","img/ss_04.jpg ","img/ss_05.jpg ","img/ss_06.jpg ","img/ss_07.jpg ","img/ss_08.jpg ","img/ss_09.jpg ","img/ss_10.jpg ","img/ss_11.jpg ","img/ss_12.jpg ","img/ss_13.jpg ","img/ss_14.jpg ","img/ss_15.jpg ","img/ss_16.jpg ","img/ss_17.jpg ","img/ss_18.jpg ","img/ss_19.jpg ","img/ss_20.jpg ","img/ss_21.jpg ","img/ss_22.jpg ","img/ss_23.jpg ","img/ss_24.jpg ","img/ss_25.jpg ","img/ss_26.jpg ","img/ss_27.jpg ","img/ss_28.jpg ","img/ss_29.jpg ","img/ss_30.jpg ","img/ss_31.jpg ","img/ss_32.jpg ","img/ss_33.jpg ","img/ss_34.jpg ","img/ss_35.jpg ","img/ss_36.jpg ","img/ss_37.jpg ","img/ss_38.jpg ","img/ss_39.jpg ","img/ss_40.jpg ","img/ss_41.jpg ","img/ss_42.jpg ","img/ss_43.jpg ","img/ss_44.jpg ","img/ss_45.jpg ","img/ss_46.jpg ","img/ss_47.jpg ","img/ss_48.jpg ","img/ss_49.jpg ","img/ss_50.jpg ","img/ss_51.jpg ","img/ss_52.jpg ","img/ss_53.jpg ","img/ss_54.jpg ","img/ss_55.jpg ","img/ss_56.jpg ","img/ss_57.jpg ","img/ss_58.jpg ","img/ss_59.jpg ","img/ss_60.jpg ","img/ss_61.jpg ","img/ss_62.jpg ","img/ss_63.jpg ","img/ss_64.jpg ","img/ss_65.jpg ","img/ss_66.jpg ","img/ss_67.jpg ","img/ss_68.jpg ","img/ss_69.jpg ","img/ss_70.jpg ","img/ss_71.jpg ","img/ss_72.jpg ","img/ss_73.jpg ","img/ss_74.jpg ","img/ss_75.jpg ","img/ss_76.jpg ","img/ss_77.jpg ","img/ss_78.jpg ","img/ss_79.jpg ","img/ss_80.jpg ","img/ss_81.jpg ","img/ss_82.jpg ","img/ss_83.jpg ","img/ss_84.jpg ","img/ss_85.jpg ","img/ss_86.jpg ","img/ss_87.jpg ","img/ss_88.jpg ","img/ss_89.jpg ","img/ss_90.jpg ","img/ss_91.jpg ","img/ss_92.jpg ","img/ss_93.jpg ","img/ss_94.jpg ","img/ss_95.jpg ","img/ss_96.jpg ","img/ss_97.jpg ","img/ss_98.jpg ","img/ss_99.jpg ","img/ss_100.jpg"]
	}

效果预览：

 源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<style>
			.content{
				width: 1810px;
				margin: 0 auto;
				border: 1px solid skyblue;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
			.item{
				height: 128px;
				width: 171px;
				background-color: #ccc;
				margin: 5px 0px;
			}
		</style>
	</head>
	<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/ss_01.jpg ","img/ss_02.jpg ","img/ss_03.jpg ","img/ss_04.jpg ","img/ss_05.jpg ","img/ss_06.jpg ","img/ss_07.jpg ","img/ss_08.jpg ","img/ss_09.jpg ","img/ss_10.jpg ","img/ss_11.jpg ","img/ss_12.jpg ","img/ss_13.jpg ","img/ss_14.jpg ","img/ss_15.jpg ","img/ss_16.jpg ","img/ss_17.jpg ","img/ss_18.jpg ","img/ss_19.jpg ","img/ss_20.jpg ","img/ss_21.jpg ","img/ss_22.jpg ","img/ss_23.jpg ","img/ss_24.jpg ","img/ss_25.jpg ","img/ss_26.jpg ","img/ss_27.jpg ","img/ss_28.jpg ","img/ss_29.jpg ","img/ss_30.jpg ","img/ss_31.jpg ","img/ss_32.jpg ","img/ss_33.jpg ","img/ss_34.jpg ","img/ss_35.jpg ","img/ss_36.jpg ","img/ss_37.jpg ","img/ss_38.jpg ","img/ss_39.jpg ","img/ss_40.jpg ","img/ss_41.jpg ","img/ss_42.jpg ","img/ss_43.jpg ","img/ss_44.jpg ","img/ss_45.jpg ","img/ss_46.jpg ","img/ss_47.jpg ","img/ss_48.jpg ","img/ss_49.jpg ","img/ss_50.jpg ","img/ss_51.jpg ","img/ss_52.jpg ","img/ss_53.jpg ","img/ss_54.jpg ","img/ss_55.jpg ","img/ss_56.jpg ","img/ss_57.jpg ","img/ss_58.jpg ","img/ss_59.jpg ","img/ss_60.jpg ","img/ss_61.jpg ","img/ss_62.jpg ","img/ss_63.jpg ","img/ss_64.jpg ","img/ss_65.jpg ","img/ss_66.jpg ","img/ss_67.jpg ","img/ss_68.jpg ","img/ss_69.jpg ","img/ss_70.jpg ","img/ss_71.jpg ","img/ss_72.jpg ","img/ss_73.jpg ","img/ss_74.jpg ","img/ss_75.jpg ","img/ss_76.jpg ","img/ss_77.jpg ","img/ss_78.jpg ","img/ss_79.jpg ","img/ss_80.jpg ","img/ss_81.jpg ","img/ss_82.jpg ","img/ss_83.jpg ","img/ss_84.jpg ","img/ss_85.jpg ","img/ss_86.jpg ","img/ss_87.jpg ","img/ss_88.jpg ","img/ss_89.jpg ","img/ss_90.jpg ","img/ss_91.jpg ","img/ss_92.jpg ","img/ss_93.jpg ","img/ss_94.jpg ","img/ss_95.jpg ","img/ss_96.jpg ","img/ss_97.jpg ","img/ss_98.jpg ","img/ss_99.jpg ","img/ss_100.jpg"]
				}
		});
	</script>
</html>