用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文件并寫好整體結構
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PhotoTest</title>
<script src="vue.js"></script>
</head>
<body>
<div id="all">
<div class="content">
</div>
</div>
</body>
</html>
<script>
var vm = new Vue({
el:"#all",
data(){
return{
}
}
})
</script>
（2） 寫好主體盒子樣式
?
<style>
body{background-color: aquamarine;}
.content{
margin: 80px auto;
width: 870px;
height: 550px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
img{
width: 86px;
height: 54px;
}
.a{
margin: 0;
padding: 0;
width: 86px;
height: 54px;
background-color: lightcoral;
}
</style>
（3）寫一個自定義組件（component），并且在template下寫好我們要重復使用的模板。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PhotoTest</title>
<script src="vue.js"></script>
</head>
<body>
<div id="all">
<div class="content">
</div>
</div>
</body>
<template id="tem">
<div class="a" @click="change">
<img :src="obj" v-show="show">
</div>
</template>
<script>
Vue.component("img-test",
{
props:["obj"],
template:"#tem",
data:function(){
return{
show:false
}
},
methods:{
change:function(){
this.show = !this.show;
}
}
})
var vm = new Vue({
el:"#all",
data(){
return{
}
}
})
</script>
</html>
（4）.因為我們要把100張切片圖片都放進去所以使用v-for循環遍歷我們的圖片更方便，：obj（v-bind:obj）這個是我們用props設置的自定義屬性，其目的是讓我們img標簽中的 :src 中的值變為一個動態的對像。
<body>
<div id="all">
<div class="content">
<img-test v-for="a in imgs" :obj="a"></img-test>
</div>
</div>
</body>
（5） .在data中寫一個imgs數組用來存放我們100張圖片的地址
var vm = new Vue({
el:"#all",
data(){
return{
imgs:["
img/images/1-2104200936259_01.jpg","img/images/1-2104200936259_02.jpg","img/images/1-2104200936259_03.jpg","img/images/1-2104200936259_04.jpg","img/images/1-2104200936259_05.jpg","img/images/1-2104200936259_06.jpg","img/images/1-2104200936259_07.jpg","img/images/1-2104200936259_08.jpg","img/images/1-2104200936259_09.jpg","img/images/1-2104200936259_10.jpg","img/images/1-2104200936259_11.jpg","img/images/1-2104200936259_12.jpg","img/images/1-2104200936259_13.jpg","img/images/1-2104200936259_14.jpg","img/images/1-2104200936259_15.jpg","img/images/1-2104200936259_16.jpg","img/images/1-2104200936259_17.jpg","img/images/1-2104200936259_18.jpg","img/images/1-2104200936259_19.jpg","img/images/1-2104200936259_20.jpg","img/images/1-2104200936259_21.jpg","img/images/1-2104200936259_22.jpg","img/images/1-2104200936259_23.jpg","img/images/1-2104200936259_24.jpg","img/images/1-2104200936259_25.jpg","img/images/1-2104200936259_26.jpg","img/images/1-2104200936259_27.jpg","img/images/1-2104200936259_28.jpg","img/images/1-2104200936259_29.jpg","img/images/1-2104200936259_30.jpg","img/images/1-2104200936259_31.jpg","img/images/1-2104200936259_32.jpg","img/images/1-2104200936259_33.jpg","img/images/1-2104200936259_34.jpg","img/images/1-2104200936259_35.jpg","img/images/1-2104200936259_36.jpg","img/images/1-2104200936259_37.jpg","img/images/1-2104200936259_38.jpg","img/images/1-2104200936259_39.jpg","img/images/1-2104200936259_40.jpg","img/images/1-2104200936259_41.jpg","img/images/1-2104200936259_42.jpg","img/images/1-2104200936259_43.jpg","img/images/1-2104200936259_44.jpg","img/images/1-2104200936259_45.jpg","img/images/1-2104200936259_46.jpg","img/images/1-2104200936259_47.jpg","img/images/1-2104200936259_48.jpg","img/images/1-2104200936259_49.jpg","img/images/1-2104200936259_50.jpg","img/images/1-2104200936259_51.jpg","img/images/1-2104200936259_52.jpg","img/images/1-2104200936259_53.jpg","img/images/1-2104200936259_54.jpg","img/images/1-2104200936259_55.jpg","img/images/1-2104200936259_56.jpg","img/images/1-2104200936259_57.jpg","img/images/1-2104200936259_58.jpg","img/images/1-2104200936259_59.jpg","img/images/1-2104200936259_60.jpg","img/images/1-2104200936259_61.jpg","img/images/1-2104200936259_62.jpg","img/images/1-2104200936259_63.jpg","img/images/1-2104200936259_64.jpg","img/images/1-2104200936259_65.jpg","img/images/1-2104200936259_66.jpg","img/images/1-2104200936259_67.jpg","img/images/1-2104200936259_68.jpg","img/images/1-2104200936259_69.jpg","img/images/1-2104200936259_70.jpg","img/images/1-2104200936259_71.jpg","img/images/1-2104200936259_72.jpg","img/images/1-2104200936259_73.jpg","img/images/1-2104200936259_74.jpg","img/images/1-2104200936259_75.jpg","img/images/1-2104200936259_76.jpg","img/images/1-2104200936259_77.jpg","img/images/1-2104200936259_78.jpg","img/images/1-2104200936259_79.jpg","img/images/1-2104200936259_80.jpg","img/images/1-2104200936259_81.jpg","img/images/1-2104200936259_82.jpg","img/images/1-2104200936259_83.jpg","img/images/1-2104200936259_84.jpg","img/images/1-2104200936259_85.jpg","img/images/1-2104200936259_86.jpg","img/images/1-2104200936259_87.jpg","img/images/1-2104200936259_88.jpg","img/images/1-2104200936259_89.jpg","img/images/1-2104200936259_90.jpg","img/images/1-2104200936259_91.jpg","img/images/1-2104200936259_92.jpg","img/images/1-2104200936259_93.jpg","img/images/1-2104200936259_94.jpg","img/images/1-2104200936259_95.jpg","img/images/1-2104200936259_96.jpg","img/images/1-2104200936259_97.jpg","img/images/1-2104200936259_98.jpg","img/images/1-2104200936259_99.jpg","img/images/1-2104200936259_100.jpg"]
}
}
})
（6）運行效果圖（每個方框都可以點擊隱藏和顯示）。
總結
以上是生活随笔為你收集整理的用Vue制作图片翻面效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android 与后台实时视频,andr
- 下一篇： 216：vue+openlayers 加