第一步：建立一個(gè)div，用來(lái)確定整體的外形，將圖片放進(jìn)去。

如果是單個(gè)圖片，直接插入“img”標(biāo)簽就行。因?yàn)樾枰玫蕉鄰垐D片，這里使用Vue.js中的“v-for”指令比較方便一些。（注：通過(guò)v-for指令，可以將一個(gè)數(shù)組或?qū)ο笾械臄?shù)據(jù)逐個(gè)進(jìn)行渲染，并生成對(duì)應(yīng)的HTML元素。）這里的“v-bind”用于動(dòng)態(tài)綁定接下來(lái)要寫(xiě)的組件的“props”。（注：通過(guò)v-bind指令，可以將一個(gè)表達(dá)式的值動(dòng)態(tài)的綁定到HTML元素的屬性中，使得屬性的值隨著表達(dá)式的值而變化）。

第二步：定義一個(gè)data對(duì)象，用于存儲(chǔ)圖片數(shù)據(jù)，以便于v-for指令的調(diào)用

第三步：定義一個(gè)Vue組件，實(shí)現(xiàn)點(diǎn)擊圖片可以顯示和隱藏的效果

為了方便，可以使用“Vue.component”方法注冊(cè)一個(gè)全局組件，用于控制整個(gè)圖片屬性。這個(gè)Vue組件包含一個(gè)圖片元素和一個(gè)點(diǎn)擊事件，點(diǎn)擊圖片時(shí)可以切換圖片的顯示和隱藏狀態(tài)。這里使用“v-show”來(lái)控制元素顯示或隱藏（注：v-show是操作元素的display屬性，這里需要將點(diǎn)擊事件@click作用在放圖片的div上面，否則將會(huì)出現(xiàn)圖片消失后顯示不出來(lái)）。

這里的圖片路徑為“p”，組件的props屬性包含了圖片的源文件，用于被第一步中的“v-bind”指令綁定，用于傳遞圖片的源文件；組件的data屬性包含了圖片的顯示狀態(tài)，當(dāng)show為true時(shí)，圖片將顯示。

methods屬性定義了當(dāng)點(diǎn)擊事件發(fā)生時(shí)，對(duì)show屬性取反，使show為false。

第四步：用style標(biāo)簽美化一下，使圖片展示效果更加準(zhǔn)確和美觀

這里#app中的“justify-content”用于控制圖片的顯示方式，可以根據(jù)自己的需求來(lái)選擇不同的排列方式，實(shí)現(xiàn)不同的效果。

完整代碼:https://pan.baidu.com/s/1M97qI-gwuPEqv5boGGsYiQ?pwd=cnuw