【Uniapp-Vue3】v-bind指令实现图片切换

林涧泣2025-01-08 8:51

v-bind指令作用就是响应式改变标签中的属性值，格式如下：

<标签名 v-bind:属性名="属性值">...</标签名>

v-bind可以简写为一个冒号，即如下形式：

<标签名 :属性名="属性值">...</标签名>

简单使用v-bind来实现一下图片的切换：

提前在static下放上3张图片

我们只需要在Image标签中让src的属性值按照响应式变量的值进行变化即可

实现切换就需要准备一个路径数组，使用定时器每隔一秒切换一次图片

复制代码

<template>
	<image :src="current" mode="aspectFit"></image>
</template>

<script setup>
	import {ref} from 'vue';

	let arr = ref([
		"../../static/pic1.jpg",
		"../../static/pic2.jpg",
		"../../static/pic3.jpg",
	])
	let current = ref("../../static/pic1.jpg");
	let i = 0;
	setInterval(() => {
		i++;
		current.value = arr.value[i % 3];
	}, 1000);
</script>