uni-app学习笔记五-vue3响应式基础

一.使用ref定义响应式变量

在组合式 API 中,推荐使用 ref() 函数来声明响应式状态,ref() 接收参数,并将其包裹在一个带有 .value 属性的 ref 对象中返回

示例代码:

javascript 复制代码
	
<template>	
	<view>{{ num1 }}</view>
	<view>{{ num2 }}</view>
	<view>{{ str }}</view>
	<view>{{ arr[2] }}</view>
	<view>{{obj.name}}</view>
</template>
	


<script setup>
	import {ref} from "vue"
	let num1 = 6
	let num2 = ref(10)
	//使用定时器改变num2的值
	// setInterval(()=>{
	// 	num2.value++;
	// 	console.log(num2.value)
	// },1000)
	
	//定义字符串
	let str = "Hello,Uni-app"
	//定义数组
	let arr = ref([1,2,3])
	//定义对象
	let obj = ref({"name":"Tim","age":18})
	//修改对象某个属性的值
	obj.value.name = "Jim"
	 
</script>

效果:

二.v-bind指令

可简写为一个冒号:

示例代码:

javascript 复制代码
<template>
	<view>
		<image :src="picUrl"></image>
	</view>
</template>

<script setup>
	import {ref} from "vue"
	let arr = ref(["/static/pic1.png","/static/pic2.png","/static/pic3.webp","/static/pic4.jpg"])
	const picUrl = ref("/static/pic1.png")
	let i = 0
	setInterval(()=>{
		i++
		picUrl.value=arr.value[i%4]
	},1000)
</script>

<style lang="scss">
	
</style>
相关推荐
Yu_Lijing2 分钟前
MySQL进阶学习与初阶复习第四天
数据库·学习·mysql
好学且牛逼的马1 小时前
学习随笔录
学习
我爱学嵌入式2 小时前
C语言第 9 天学习笔记:数组(二维数组与字符数组)
c语言·笔记·学习
im_AMBER6 小时前
学习日志19 python
python·学习
_Kayo_10 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
chenchihwen10 小时前
大模型应用班-第2课 DeepSeek使用与提示词工程课程重点 学习ollama 安装 用deepseek-r1:1.5b 分析PDF 内容
人工智能·学习
陈不知代码10 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
源码_V_saaskw10 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
超浪的晨11 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
使二颗心免于哀伤12 小时前
《设计模式之禅》笔记摘录 - 10.装饰模式
笔记·设计模式