使用vue完成图片表格的点击因隐藏效果

首先了解整个项目可以分几个板块。图片的切割，图片放入的框架构建，图片放入。

1.图片的分割，这里的图片分割可以使用PS，或者网上搜图片切割的网站上传图片就行（http://www.zuohaotu.com/cut-image.aspx）

2.创建一个项目，导入vue.js

 

 

3. 建立一个名字为"app"的div，确定整体的框架，再"app"的div在建立一个div将图片放入，因为10*10图片表格考一个一个创建div盒子是太不切实际的，我们用v-for循环语句

 

 

 4.使用style对div进行美化设置样式，这里使用弹性布局

 

 

 5.在组件中插入图片，设置一个show和v-show来控制图片的隐藏和显示效果，再用change来改变变量show，用@click调用这个方

 

 

 

 

 

 

 

 6.用v-for将父组件中的arrayimg属性中的图片遍历并传给子组件im，子组件用props接受

 

 运行效果图

 

 完整代码展示图

 

 

通过百度网盘分享的文件：源代码 2023....txt
链接：https://pan.baidu.com/s/1D1KZtWD-4dZY7XOgnxd1Sg
提取码：bD57
复制这段内容打开「百度网盘APP 即可获取」