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

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>
相关推荐
snakeshe10101 分钟前
深入理解useState:批量更新与非函数参数支持
前端
windliang1 分钟前
Cursor 排查 eslint 问题全过程记录
前端·cursor
boleixiongdi2 分钟前
# Bsin-App Uni:面向未来的跨端开发框架深度解析
前端
G等你下课5 分钟前
AJAX请求跨域问题
前端·javascript·http
前端西瓜哥6 分钟前
pixijs 的填充渲染错误,如何处理?
前端
snakeshe10106 分钟前
6-1. 实现 useState
前端
呆呆没有脑袋8 分钟前
深入浅出 JavaScript 闭包:从核心概念到框架实践
前端
snakeshe101010 分钟前
用100行代码实现React useState钩子:多状态管理揭秘
前端
爱编程的喵10 分钟前
JavaScript闭包深度解析:从作用域到实战应用
前端·javascript
ITfeib11 分钟前
Flutter
开发语言·javascript·flutter