一、普通方式：
其中，index是關鍵。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style> html, body{ margin: 0; padding: 0; } .photo-player{ width: 456px; height: 670px; overflow: hidden; position: relative; } .photo-player-lists{ list-style-type: none; margin: 0; padding: 0; width: 456px; height: 670px; } .photo-player-lists li{ list-style-type: none; width: 456px; height: 670px; } .photo-player-lists li img{ width: 456px; height: 670px; } .photo-player-button{ position: absolute; margin: 0; padding: 0; bottom: 30px; left: 198px; list-style-type: none; } .photo-player-button li{ list-style-type: none; width: 10px; height: 10px; margin-left: 5px; margin-right: 5px; border-radius: 6px; float: left; cursor: pointer; } .white{ background: #ffffff; } .active{ background: #0000ff; } </style>
<title>Title</title>
</head>
<body>
<div id="app">
<my-player :photos="photos"></my-player>
<my-player :photos="photos"></my-player>
<my-player :photos="photos"></my-player>
</div>
<script src="libs/vue.js"></script>
<script> Vue.component("my-player", { template: `<div class="photo-player"> <ul class="photo-player-lists"> <li v-for="(value, key) in photos" v-if="key==index"><img :src="value" /></li> </ul> <ul class="photo-player-button"> <li v-for="(value, key) in photos" :class="['white', {'active': key == index}]" @click="index = key"></li> </ul> </div>`, props: ["photos"], data: function(){ return { index: 0 } }, methods: { change(){ let that = this; let len = this.photos.length; setInterval(function(){ that.index++; if(that.index == len){ that.index = 0; } }, 1000*3); } }, mounted(){ this.change(); } }); let app = new Vue({ el: "#app", data: { photos: ["images/08.jpg", "images/13.jpg", "images/16.jpg"] } }); </script>
</body>
</html>
二、單文件組件形式：
PhotoPlayer.vue：
<template>
<div class="photo-player">
<ul class="photo-player-lists">
<li v-for="(value, key) in photos" v-if="key==index" :key="key"><img :src="value" /></li>
</ul>
<ul class="photo-player-button">
<li v-for="(value, key) in photos" :class="['white', {'active': key == index}]" @click="index = key" :key="key"></li>
</ul>
</div>
</template>
<script> export default { data(){ return { index: 0 } }, props: ["photos"], methods: { change(){ let that = this; let len = this.photos.length; setInterval(function(){ that.index++; if(that.index == len){ that.index = 0; } }, 1000*5); } }, mounted(){ this.change(); } } </script>
<style scoped> html, body{ margin: 0; padding: 0; } .photo-player{ width: 456px; height: 670px; overflow: hidden; position: relative; } .photo-player-lists{ list-style-type: none; margin: 0; padding: 0; width: 456px; height: 670px; } .photo-player-lists li{ list-style-type: none; width: 456px; height: 670px; } .photo-player-lists li img{ width: 456px; height: 670px; } .photo-player-button{ position: absolute; margin: 0; padding: 0; bottom: 30px; left: 198px; list-style-type: none; } .photo-player-button li{ list-style-type: none; width: 10px; height: 10px; margin-left: 5px; margin-right: 5px; border-radius: 6px; float: left; cursor: pointer; } .white{ background: #ffffff; } .active{ background: #0000ff; } </style>使用時：
在某個單文件組件中引用PhotoPlayer.vue
<template>
<div>
<PhotoPlayer :photos="photos"></PhotoPlayer>
</div>
</template>
<script> import PhotoPlayer from './PhotoPlayer' export default { data() { return { photos: [require("../assets/08.jpg"), require("../assets/13.jpg"), require("../assets/16.jpg")] } }, components: { PhotoPlayer } }; </script>
<style scoped=""></style>
注意：
定義了一個數組，數組里面裝有圖片的路徑，使用for循環渲染頁面時，圖片路徑對但是圖片不顯示。
解決辦法：
數組里面圖片的路徑要寫成如下：
image:require('../assets/login.png')渲染的時候要寫：
<img :src="item.image" />