Vue 3 ＜script setup＞ 使用v-bind（或简写为 :）来动态绑定图片的 src 属性
<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，从而实现循环播放图片的效果。