当前位置: 首页 > article >正文

【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>

http://www.kler.cn/a/471739.html

相关文章:

  • 《HeadFirst设计模式》笔记(上)
  • 并行云使用流程
  • [Unity Shader] 【游戏开发】Unity基础光照1-光照模型原理
  • 对话|企业如何构建更完善的容器供应链安全防护体系
  • Visual studio code编写简单记事本exe笔记
  • 深入了解 ES6 Map:用法与实践
  • 将 Docker 和 Kubernetes 的存储目录迁移到更大的磁盘分区上
  • transformer深度学习实战CCTSDB中国交通标志识别
  • 游戏语音趋势解析,社交互动有助于营造沉浸式体验
  • 【gRPC】一元拦截器与流式拦截器确保请求附带认证令牌token
  • 自然灾害事件复盘分析的思考框架
  • Flutter使用GestureDetector工具实现手势缩放效果
  • C++二十三种设计模式之工厂方法模式
  • 力扣-数据结构-15【算法学习day.86】
  • 前端如何处理后端传入的复杂数据格式
  • 常见的显示器分辨率及其对应的像素数量
  • 短诗《腊八粥》
  • 【python】Luhn算法验证身份证号码的程序
  • Linux初识——基本指令
  • [Qt] 多元素控件 | 容器类控件 | 布局管理器layout
  • Qt信号槽相关语法
  • MATLAB语言的正则表达式
  • 代码随想录day39 动态规划7
  • Oracle Dataguard(主库为单节点)配置详解(4):将主库复制到备库并启动同步
  • Golang学习笔记_19——Stringer
  • jQuery的基本使用学习笔记