<img :src="images[currentIndex]" >
<template> <div> <!-- 使用 v-bind 或简写为 : 来动态绑定图片的 src 属性 --> <img :src="images[currentIndex]" alt="Dynamic Image" style="width: 100px; height: auto;"> <!-- 添加一个按钮来触发图片切换 --> <button @click="changeImage">切换图片</button> </div>
</template> <script setup>
import { ref } from 'vue'; // 定义一个响应式数组,存储图片地址
const images = ref([ 'path/to/image1.jpg', 'path/to/image2.jpg', 'path/to/image3.jpg', // 更多图片地址...
]); // 定义一个响应式变量,用于存储当前显示图片的索引
const currentIndex = ref(0); // 默认显示第一张图片 // 定义一个方法来处理点击事件,切换图片
function changeImage() { // 假设我们简单地通过加一来切换到下一张图片,如果超出数组长度则回到第一张 currentIndex.value = (currentIndex.value + 1) % images.value.length;
}
</script> <style scoped>
/* 你的样式 */
</style>
在这个例子中,定义了一个名为 images
的响应式数组,用来存储图片的地址。currentIndex
是一个响应式变量,用于跟踪当前应该显示哪张图片的索引。
在模板中,使用 v-bind
(或简写为 :
)来将图片的 src
属性绑定到 images[currentIndex]
上,这样每当 currentIndex
的值发生变化时,图片的 src
属性也会相应地更新,从而显示不同的图片。
此外还定义了一个 changeImage
方法,当按钮被点击时,该方法会被触发。在这个方法中,更新 currentIndex
的值来切换到下一张图片。如果当前索引已经是数组的最后一个元素的索引,则将其重置为 0,从而实现循环播放图片的效果。