【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>
相关推荐
独立开阀者_FwtCoder4 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士4 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
南岸月明4 分钟前
不聊主业,聊聊你们眼中的副业是什么样的?
前端
Kevin在掘金920149 分钟前
c#、.net、Fluent UI Blazor
前端
LovelyAqaurius10 分钟前
RSA加密算法:从数学魔法到现实守护
前端
Hilaku12 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
星语卿12 分钟前
Js事件循环
javascript
datagear12 分钟前
如何在DataGear 5.4.1 中快速制作HTTP数据源服务端分页的数据表格看板
javascript·数据可视化
蛋黄蛋黄15 分钟前
微信表情怎么在自己的项目使用微信表情?-> [开源仓库]wechat-emoji
前端·github
汪子熙16 分钟前
错误剖析:net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) 的含义与解决之道
前端