Vue制作图片翻面效果

1.创建文件夹PhotoTest。
2.并在当前文件夹下创建img包用来存储图片。
3.把vue.js文件复制到PhotoTest文件夹下
4.图片切片

（1）图片在photoshop（ps）中打开。

（2）右键选择切片工具。

（3）左键拉一个框选中整张图片，再点击右键选择划分切片。

（4）勾上水平和垂直划分，并且内容都改为10

（5）存储为web格式，选择JPEG格式

（6）选择新建文件夹得到100张图片

5.页面布局

（1）.打开HBuilder创建一个HTML文件并写好整体结构

（2） 写好主体盒子样式

（3）写一个自定义组件（component），并且在template下写好我们要重复使用的模板。

（4）.因为我们要把100张切片图片都放进去所以使用v-for循环遍历我们的图片更方便，：obj（v-bind:obj）这个是我们用props设置的自定义属性，其目的是让我们img标签中的 :src 中的值变为一个动态的对像。

（5） .在data中写一个imgs数组用来存放我们100张图片的地址

（6）运行效果图（每个方框都可以点击隐藏和显示）。