使用Vue完成10×10的图片表格点击事件

a200612

已于 2023-03-18 21:51:48 修改

阅读量151

点赞数 2

文章标签： vue.js 前端 javascript

于 2023-03-18 21:37:19 首次发布

本文链接：https://blog.csdn.net/a200612/article/details/129642158

版权

本文档详细介绍了如何使用Vue.js在前端完成一个10×10的图片表格，并添加点击事件。教程包括在HTML中引入Vue.js、定义组件、传递数据、设置点击事件以及布局调整，最后展示实现后的效果。

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

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、教程
二、源代码

前言

工具：Hbiuder

插件：vue.js

一、教程

1.第一步在Hbiuder的head标签引入Vue.js

<script src="js/vue.js"></script>

2. 第二步在body标签中创建一个id为app的div，并在app里创立一个class为content的div用来显示图片。

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

3.定义组件

<script>
               //定义组件 
			Vue.component("text-div",{
				template:"#text",   
				props:["im"],  //自定义属性
				data:function(){
					return{
						show:true   
					}
				},
				methods:{
					change:function(){
						this.show = !this.show;   //点击事件方法取反
					}
				}
			});
			

		</script>

4.给组件传值并定义点击事件

<template id="text">
			<div class="item" @click="change">
				<img :src="im" v-show="show" />   //接收图片路径
			</div>
		</template>
	
		<script>
			Vue.component("text-div",{
				template:"#text",
				props:["im"],
				data:function(){
					return{
						show:true
					}
				},
				methods:{
					change:function(){
						this.show = !this.show;
					}
				}
			});
			
			var vm = new Vue({
				el:"#app",
				data:{        //图片路径以数组的形式输入
						imgs:["img/images/OIP-C_01.gif","img/images/OIP-C_02.gif","img/images/OIP-C_03.gif","img/images/OIP-C_04.gif","img/images/OIP-C_05.gif","img/images/OIP-C_06.gif"