作业

大致思路：切图片，导入图片，导入 连接vue，写盒子放图片，用弹性布局定图片，用组件实现点击效果

1.将图片分割为10*10

2.导入vue.js文件，并且将图片拖到img文件

3.创建一个div id为app,然后在里面再写一个div class为content

4.div样式用的是弹性布局   

justify-content: space-around; 是x轴上的元素排列方式 

space-around是空白分布在元素中间

flex-wrap: wrap;是让弹性布局为自动换行

5.因为图片切割为10*10 比较多 通过给每一个图片所放置的div设置一个@click事件和v-show指令

来实现图片点击后隐藏和显示的效果就会特别慢 所以用组件来解决重复的代码 用v-for指令将imgs中的图片传送给子组件i  i用props接受

完整代码：

效果展示：