1.創(chuàng)建文件夾

創(chuàng)建文件夾PhotoTest。

并在當(dāng)前文件夾下創(chuàng)建img包用來存儲(chǔ)圖片。

把vue.js文件復(fù)制到PhotoTest文件夾下。

文件目錄如下。

2.圖片切片

隨便找一張圖片在（ps）中打開。

右鍵選擇切片工具。?

?.左鍵拉一個(gè)框選中整張圖片，再點(diǎn)擊右鍵選擇劃分切片.

?勾上水平和垂直劃分，并且內(nèi)容都改為10。

?選擇jpeg格式，點(diǎn)擊左下角儲(chǔ)存，選擇儲(chǔ)存位置。

?儲(chǔ)存在我們已經(jīng)建好的img包里，這樣我們就得到了這張圖片的100張圖片了。

?3.頁面布局

打開HBuilderX創(chuàng)建一個(gè)html文件并寫好整體結(jié)構(gòu)。

?寫好主題盒子樣式。

?寫一個(gè)自定義組件，并且在template下寫好我們要重復(fù)使用的模板。

?因?yàn)槲覀円?00張切片圖片都放進(jìn)去所以使用v-for循環(huán)遍歷我們的圖片更方便，：obj（v-bind:obj）這個(gè)是我們用props設(shè)置的自定義屬性，其目的是讓我們img標(biāo)簽中的 :src 中的值變?yōu)橐粋€(gè)動(dòng)態(tài)的對像。

?在data中寫一個(gè)imgs數(shù)組用來存放我們100張圖片的地址。

?4.快捷地做出100張圖片地址的文本。

你在把圖片存到img中后除了第一張圖片是JPEG格式其他的都是gif格式，先把第一張圖片的格式改為gif格式

現(xiàn)在data中寫上第一張的地址。

?復(fù)制第一個(gè)并且打開Excel，隨便粘貼一個(gè)位置，左鍵點(diǎn)住單元格右下角向下拉出100個(gè)。

?點(diǎn)擊選擇性粘貼中的轉(zhuǎn)至。

?把粘貼內(nèi)容復(fù)制到新建的文本文檔里，然后替換中間內(nèi)容。

?運(yùn)行效果

?

?

總結(jié)

以上是生活随笔為你收集整理的用Vue制作一个图片翻面效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。