项目里用到的vue.js是下载的vue2js文件
或者直接引入https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js
或者从vue2官网下载 vue2js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>13_vue2的v-if与v-for优先级</title>
<style>
.slider ul {
width: 300%;
display: flex;
flex-direction: row;
transition: transform 0.5s ease;
}
.slider ul li {
width: 100%;
display: flex;
justify-content: center;
}
img {
width: 100%;
}
</style>
</head>
<body>
<div id="app">
<div class="slider">
<ul>
<li v-for="(image, index) in visibleImages" :key="index">
<img :src="image" alt="Slider Image">
</li>
</ul>
</div>
</div>
</body>
<script src="lib/vue.js"></script>
<script>
new Vue({
computed: {
visibleImages() {
const firstIndex = this.currentImageIndex;
const secondIndex = (this.currentImageIndex + 1) % this.images.length;
const thirdIndex = (this.currentImageIndex + 2) % this.images.length;
return [this.images[firstIndex], this.images[secondIndex], this.images[thirdIndex]];
}
},
mounted() {
setInterval(() => {
this.currentImageIndex = (this.currentImageIndex + 1) % this.images.length;
}, 3000);
},
data: {
currentImageIndex: 0,
images: [
'https://res.vmallres.com/uomcdn/CN/cms/2023-12/30cb56c54b6f45e1a52d8a7748e43524.jpg',
'https://res.vmallres.com/uomcdn/CN/cms/2023-12/95919b09514c4c29a432eb2085a56735.jpg',
'https://res.vmallres.com/cmscdn/CN/2023-11/35e43ef9d3b743358204febb3ffb3768.jpg'
],
}
}).$mount('#app')
</script>
</html>