1.首先使用ps把图片切割成10x10样式,并保存图片。引入vue.js文件,对整个盒子进行设置(包括高度,边框,盒子居中,弹性布局,换行和对齐方式)接下来设置每个图片所在盒子宽高和背景色以及图片的宽高。
2.创建div,使用循环v-for和属性单向数据绑定v-bind,设置点击事件,实现点击效果,点击盒子将show的值取反,实现隐藏效果。使用vue组件,定义组件名称,属性,点击图片将属性show的值取反,实现图片隐藏。
3.明确vue作用范围(最外面大盒子),最后引入图片路径(使用excel表格工具,图片拉进去,复制粘贴)
4.最终的运行效果,如上。