vue.js能做輪播圖，其實作方法：先寫出整體的框架；然後根據imgArray照片的陣列渲染小圓點的數量；接著將span綁定on為小圓點亮的狀態；最後透過自訂變數ifshow來顯示圖片的顯示隱藏，並設定nowindex來控制輪播即可。
本教學操作環境：windows7系統、vue2.0版，此方法適用於所有品牌電腦。
相關推薦：《vue.js教學》
#最近新學習了vuejs,嘗試著用vuejs寫了一個簡單的圖片輪播，便做個簡單的記錄
（1）先寫出整體的框架
<template>
<div class="slide-show">
<div class="slide-img">
<transition name="slide-trans" >
<img v-if='ifshow' :src='imgArray[nowindex]'>
</transition>
<transition name="slide-trans-old">
<img v-if="!ifshow" :src="imgArray[nowindex]">
</transition>
<ul class="slide-pages">
<li v-for="(item,index) in imgArray">
<span :class="{on :index===nowindex}" @click="goto(index)"></span>
</li>
</ul>
</div>
</div>
</template>根據imgArray這個照片的數組渲染小圓點的數量，為span綁定on為小圓點亮的狀態，照片的顯示隱藏透過自訂變數ifshow來顯示，nowindex則控制輪播對應的照片。
（2）輪播圖的數組，如果是本地的圖片，而且不放在static檔案下的，請用require圈上路徑，否則路徑會報錯。如果是從後台伺服器取得的則不需要。
data(){
return{
imgArray: [
require('../../img/item_01.png'),
require('../../img/item_02.png'),
require('../../img/item_03.png'),
require('../../img/item_04.png')
]
}
}（3）主要是透過改變自訂變數nowindex來改變輪播圖的狀態，要注意滑動的過程是能看見兩張圖的，所以在goto函數中設定了一個短暫的定時器，讓一張顯示另一張隱藏，分別加上不同的過度效果。
<script type="text/javascript">
export default {
props:{
imgArray:{
type:Array,
default:[]
}
},
data() {
return {
ifshow:true,
nowindex:0,
}
},
created(){
this.timerun()
},
computed:{
nextindex(){
if(this.nowindex === this.imgArray.length -1){
return 0
}else{
return this.nowindex + 1
}
}
},
methods: {
goto(index){
let that = this;
this.ifshow = false;
setTimeout(function(){
that.ifshow = true;
that.nowindex = index;
},100)
},
timerun(){
let that = this;
setInterval(function(){
that.goto(that.nextindex)
},2000)
}
}
}
</script>到這裡，這個簡單的輪播圖就到此結束了。
以上是vue.js能做輪播圖嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！
