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

1.首先使用ps把图片切割成10x10样式,并保存图片。引入vue.js文件,对整个盒子进行设置(包括高度,边框,盒子居中,弹性布局,换行和对齐方式)接下来设置每个图片所在盒子宽高和背景色以及图片的宽高。

2.创建div,使用循环v-for和属性单向数据绑定v-bind,设置点击事件,实现点击效果,点击盒子将show的值取反,实现隐藏效果。使用vue组件,定义组件名称,属性,点击图片将属性show的值取反,实现图片隐藏。

3.明确vue作用范围(最外面大盒子),最后引入图片路径(使用excel表格工具,图片拉进去,复制粘贴)

4.最终的运行效果,如上。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值