大致思路：切圖片，導(dǎo)入圖片，導(dǎo)入 連接vue，寫盒子放圖片，用彈性布局定圖片，用組件實(shí)現(xiàn)點(diǎn)擊效果

1.將圖片分割為10*10

2.導(dǎo)入vue.js文件，并且將圖片拖到img文件

3.創(chuàng)建一個(gè)div id為app,然后在里面再寫一個(gè)div class為content

4.div樣式用的是彈性布局? ?

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

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

flex-wrap: wrap;是讓彈性布局為自動(dòng)換行

5.因?yàn)閳D片切割為10*10 比較多 通過給每一個(gè)圖片所放置的div設(shè)置一個(gè)@click事件和v-show指令

來實(shí)現(xiàn)圖片點(diǎn)擊后隱藏和顯示的效果就會(huì)特別慢 所以用組件來解決重復(fù)的代碼 用v-for指令將imgs中的圖片傳送給子組件i? i用props接受

完整代碼：

效果展示：