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

最新推荐文章于 2024-09-24 10:01:00 发布

拆弹大专家

最新推荐文章于 2024-09-24 10:01:00 发布

阅读量54

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_69858798/article/details/129686623

版权

该代码示例展示了如何使用Vue.js创建一个自定义组件，该组件用于显示一组图片，并在点击时隐藏或显示图片。通过定义组件模板，props传递属性，data定义实例数据，以及methods处理点击事件，实现了图片列表的动态显示和隐藏功能。

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

引入vue.js

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

创建两个div

<div id="app">
			<div class="content">
				
			</div>
		</div>

定义组件，props自定义属性，data实例数据对象

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

创建vue实例，添加图片，el与div进行绑定，data实现实例化对象

var vm = new Vue({
				el: "#app",
				data: {
					imgs:["img/vue16_01.gif","img/vue16_02.gif","img/vue16_03.gif","img/vue16_04.gif","img/vue16_05.gif","img/vue16_06.gif","img/vue16_07.gif","img/vue16_08.gif","img/vue16_09.gif","img/vue16_10.gif","img/vue16_11.gif","img/vue16_12.gif","img/vue16_13.gif","img/vue16_14.gif","img/vue16_15.gif","img/vue16_16.gif","img/vue16_17.gif","img/vue16_18.gif","img/vue16_19.gif","img/vue16_20.gif","img/vue16_21.gif","img/vue16_22.gif","img/vue16_23.gif","img/vue16_24.gif","img/vue16_25.gif","img/vue16_26.gif","img/vue16_27.gif","img/vue16_28.gif","img/vue16_29.gif","img/vue16_30.gif","img/vue16_31.gif","img/vue16_32.gif","img/vue16_33.gif","img/vue16_34.gif","img/vue16_35.gif","img/vue16_36.gif","img/vue16_37.gif","img/vue16_38.gif","img/vue16_39.gif","img/vue16_40.gif","img/vue16_41.gif","img/vue16_42.gif","img/vue16_43.gif","img/vue16_44.gif","img/vue16_45.gif","img/vue16_46.gif","img/vue16_47.gif","img/vue16_48.gif","img/vue16_49.gif","img/vue16_50.gif","img/vue16_51.gif","img/vue16_52.gif","img/vue16_53.gif","img/vue16_54.gif","img/vue16_55.gif","img/vue16_56.gif","img/vue16_57.gif","img/vue16_58.gif","img/vue16_59.gif","img/vue16_60.gif","img/vue16_61.gif","img/vue16_62.gif","img/vue16_63.gif","img/vue16_64.gif","img/vue16_65.gif","img/vue16_66.gif","img/vue16_67.gif","img/vue16_68.gif","img/vue16_69.gif","img/vue16_70.gif","img/vue16_71.gif","img/vue16_72.gif","img/vue16_73.gif","img/vue16_74.gif","img/vue16_75.gif","img/vue16_76.gif","img/vue16_77.gif","img/vue16_78.gif","img/vue16_79.gif","img/vue16_80.gif","img/vue16_81.gif","img/vue16_82.gif","img/vue16_83.gif","img/vue16_84.gif","img/vue16_85.gif","img/vue16_86.gif","img/vue16_87.gif","img/vue16_88.gif","img/vue16_89.gif","img/vue16_90.gif","img/vue16_91.gif","img/vue16_92.gif","img/vue16_93.gif","img/vue16_94.gif","img/vue16_95.gif","img/vue16_96.gif","img/vue16_97.gif","img/vue16_98.gif","img/vue16_99.gif","img/vue16_100.gif"]

设置css样式

<style type="text/css">
			body {
				background-color: green
			}
			
			.content {
				width: 1600px;
				border: 1px solid red;
				margin: 0 auto;
				/*弹性布局*/
				display: flex;
				/*在住轴上的对齐方式*/
				justify-content:space-around;
				/*是否换行*/
				flex-wrap: wrap;
			}
			
			.item {
				width: 150px;
				height: 89px;
				margin: 3px 1px;
				background-color: #ccc
			}
			img {
				width: 150px;
				height: 89px;					
		</style>

使用自定义组件，@click用来响应盒子的点击事件,对show的取反，效果为图片隐藏

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

效果图展示

完整代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body {
				background-color: green
			}
			
			.content {
				width: 1600px;
				border: 1px solid red;
				margin: 0 auto;
				/*弹性布局*/
				display: flex;
				/*在住轴上的对齐方式*/
				justify-content:space-around;
				/*是否换行*/
				flex-wrap: wrap;
			}
			
			.item {
				width: 150px;
				height: 89px;
				margin: 3px 1px;
				background-color: #ccc
			}
			img {
				width: 150px;
				height: 89px;					
		</style>			
		<script src="js/vue.js" type="text/javascript"></script>
	</head>

	<body>
		<div id="app">
			<div class="content">
				<test-div v-for="i in imgs" :im="i"></test-div>
			</div>
		</div>
		<template id="hu-temp">
			<div class="item" @click="change">
				<img :src="im" v-show="show" />
			</div>
		</template>
		<script>
			Vue.component("test-div", {
				template: '#hu-temp',
				props: ["im"],
				data: function() {
					return {
						show: true,
						img: "img/vue16.01.gif"
					}
				},
				methods: {
					change: function() {
						this.show = !this.show
					}
				}
			});
			var vm = new Vue({
				el: "#app",
				data: {
					imgs:["img/vue16_01.gif","img/vue16_02.gif","img/vue16_03.gif","img/vue16_04.gif","img/vue16_05.gif","img/vue16_06.gif","img/vue16_07.gif","img/vue16_08.gif","img/vue16_09.gif","img/vue16_10.gif","img/vue16_11.gif","img/vue16_12.gif","img/vue16_13.gif","img/vue16_14.gif","img/vue16_15.gif","img/vue16_16.gif","img/vue16_17.gif","img/vue16_18.gif","img/vue16_19.gif","img/vue16_20.gif","img/vue16_21.gif","img/vue16_22.gif","img/vue16_23.gif","img/vue16_24.gif","img/vue16_25.gif","img/vue16_26.gif","img/vue16_27.gif","img/vue16_28.gif","img/vue16_29.gif","img/vue16_30.gif","img/vue16_31.gif","img/vue16_32.gif","img/vue16_33.gif","img/vue16_34.gif","img/vue16_35.gif","img/vue16_36.gif","img/vue16_37.gif","img/vue16_38.gif","img/vue16_39.gif","img/vue16_40.gif","img/vue16_41.gif","img/vue16_42.gif","img/vue16_43.gif","img/vue16_44.gif","img/vue16_45.gif","img/vue16_46.gif","img/vue16_47.gif","img/vue16_48.gif","img/vue16_49.gif","img/vue16_50.gif","img/vue16_51.gif","img/vue16_52.gif","img/vue16_53.gif","img/vue16_54.gif","img/vue16_55.gif","img/vue16_56.gif","img/vue16_57.gif","img/vue16_58.gif","img/vue16_59.gif","img/vue16_60.gif","img/vue16_61.gif","img/vue16_62.gif","img/vue16_63.gif","img/vue16_64.gif","img/vue16_65.gif","img/vue16_66.gif","img/vue16_67.gif","img/vue16_68.gif","img/vue16_69.gif","img/vue16_70.gif","img/vue16_71.gif","img/vue16_72.gif","img/vue16_73.gif","img/vue16_74.gif","img/vue16_75.gif","img/vue16_76.gif","img/vue16_77.gif","img/vue16_78.gif","img/vue16_79.gif","img/vue16_80.gif","img/vue16_81.gif","img/vue16_82.gif","img/vue16_83.gif","img/vue16_84.gif","img/vue16_85.gif","img/vue16_86.gif","img/vue16_87.gif","img/vue16_88.gif","img/vue16_89.gif","img/vue16_90.gif","img/vue16_91.gif","img/vue16_92.gif","img/vue16_93.gif","img/vue16_94.gif","img/vue16_95.gif","img/vue16_96.gif","img/vue16_97.gif","img/vue16_98.gif","img/vue16_99.gif","img/vue16_100.gif"]

				}
			})
		</script>

	</body>

</html>