【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>
相关推荐
瓜瓜怪兽亚6 分钟前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院11 分钟前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq77982334014 分钟前
React组件完全指南
前端·javascript·react.js
EndingCoder20 分钟前
MongoDB基础与Mongoose ODM
服务器·javascript·数据库·mongodb·中间件·node.js
qq77982334041 分钟前
React Hooks完全指南
前端·javascript·react.js
Moment43 分钟前
性能狂飙!Next.js 16 重磅发布:Turbopack 稳定、编译提速 10 倍!🚀🚀🚀
前端·javascript·后端
软件技术NINI1 小时前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html
DoraBigHead1 小时前
React Fiber:从“递归地狱”到“时间切片”的重生之路
前端·javascript·react.js
游戏开发爱好者81 小时前
如何系统化掌握 iOS 26 App 耗电管理,多工具协作
android·macos·ios·小程序·uni-app·cocoa·iphone
YUELEI1181 小时前
Vue 安装依赖的集合和小知识
javascript·vue.js·ecmascript