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，从而实现循环播放图片的效果。