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

发布时间 2023-03-22 21:11:01作者: 不会敲代码i

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

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 即可获取」