初学vue3与ts:setup与setup()下的数据写法

把setup写在script里

<template>
	<div>
		<div class="index-title">script setup</div>
		<div class="title">字符串:</div>
		<div class="title-sub">ref版:{{strRef}}</div>
		<div class="title-sub">ref版模板字符串:{{strRefTem}}</div>
		<div class="title-sub">reactive版:{{strReactive.str}}</div>
		<div class="title-sub">reactive版模板字符串:{{strReactiveTem.str}}</div>
		<div class="title">数字:</div>
		<div class="title-sub">ref版:{{numRef}}</div>
		<div class="title-sub">reactive版:{{numReactive.num}}</div>
		<div class="title">布尔:</div>
		<div class="title-sub">ref版:{{booRef}}</div>
		<div class="title-sub">reactive版:{{booReactive.boo}}</div>
		<div class="title">数组:</div>
		<div class="title-sub flex">
			<div>ref版:</div>
			<div v-for="(item,index) in arrRef" :key="index">{{item}}</div>
		</div>
		<div class="title-sub flex">
			<div>reactive版:</div>
			<div v-for="(item,index) in arrReactive.arr" :key="index">{{item}}</div>
		</div>
		<div class="title">用any定义一个定时器,10s后停止:</div>
		<div class="title-sub">{{timeTam}}s</div>
		<div class="title">对象:</div>
		<div class="title-sub">ref版:name:{{objRef.name}},age:{{objRef.age}}</div>
		<div class="title-sub">reactive版:name:{{objReactive.name}},age:{{objReactive.age}}</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue' //引入,不要问为什么
	// 字符串
	// ref版 也可以用 ref<string>('我是ref版')
	const strRef = ref('我是ref版')
	// ref版-模板字符串
	const title = '你好,'
	const strRefTem = ref(`${title}我是模板字符串`)
	// reactive版
	const strReactive = reactive({
		str:'我是reactive版'
	})
	// reactive版-模板字符串
	const strReactiveTem = reactive({
		str:`${strRef.value}-模板字符串`
	})
	// 字符串重新赋值
	setTimeout(()=>{
		strRef.value = '我是ref版-2s后'
		strReactive.str = '我是reactive版-2s后'
	},2000)
	
	// 数字
	// ref版 也可以用 ref<number>(100)
	const numRef = ref(100)
	// reactive版
	const numReactive = reactive({
		num:100
	})
	
	// 布尔
	// ref版 也可以用 ref<boolean>(false)
	const booRef = ref(false)
	// reactive版
	const booReactive = reactive({
		boo:true
	})
	
	// 数组
	// ref版 也可以用 ref<object[]>([1,2,3,4])
	const arrRef = ref(['我','是','数','组'])
	// reactive版
	const arrReactive = reactive({
		arr:['上','面','说','的','没','错']
	})
	
	// 不限制类型
	const time = ref<any>(null)
	const timeTam = ref(0)
	time.value = setInterval(()=>{
		timeTam.value++;
	},1000)
	setTimeout(()=>{
		clearInterval(time.value)
	},10000)
	
	// 对象
	const objRef = ref({name:'林',age:18})
	// reactive版
	const objReactive = reactive({
		name:'吴',
		age:11
	})
</script>

<style>
	.index-title{
		font-size: 24px;
		font-weight: bold;
	}
	.title{
		font-weight: bold;
		font-size: 20px;
		padding-top: 20px;
		padding-left: 20px;
	}
	.title-sub{
		padding-left: 40px;
		margin-top: 10px;
	}
	.flex{
		display: flex;
		align-items: center;
	}
</style>

在script里用setup()

<template>
	<div>
		<div class="index-title">script setup()</div>
		<div class="title">字符串:</div>
		<div class="title-sub">ref版:{{strRef}}</div>
		<div class="title-sub">ref版模板字符串:{{strRefTem}}</div>
		<div class="title-sub">reactive版:{{strReactive.str}}</div>
		<div class="title-sub">reactive版模板字符串:{{strReactiveTem.str}}</div>
		<div class="title">数字:</div>
		<div class="title-sub">ref版:{{numRef}}</div>
		<div class="title-sub">reactive版:{{numReactive.num}}</div>
		<div class="title">布尔:</div>
		<div class="title-sub">ref版:{{booRef}}</div>
		<div class="title-sub">reactive版:{{booReactive.boo}}</div>
		<div class="title">数组:</div>
		<div class="title-sub flex">
			<div>ref版:</div>
			<div v-for="(item,index) in arrRef" :key="index">{{item}}</div>
		</div>
		<div class="title-sub flex">
			<div>reactive版:</div>
			<div v-for="(item,index) in arrReactive.arr" :key="index">{{item}}</div>
		</div>
		<div class="title">用any定义一个定时器,10s后停止:</div>
		<div class="title-sub">{{timeTam}}s</div>
		<div class="title">对象:</div>
		<div class="title-sub">ref版:name:{{objRef.name}},age:{{objRef.age}}</div>
		<div class="title-sub">reactive版:name:{{objReactive.name}},age:{{objReactive.age}}</div>
	</div>
</template>

<script lang="ts">
	import { defineComponent, ref, reactive } from 'vue' //引入,不要问为什么
	export default defineComponent({
		setup() {
			// 字符串
			// ref版 也可以用 ref<string>('我是ref版')
			const strRef = ref('我是ref版')
			// ref版-模板字符串
			const title = '你好,'
			const strRefTem = ref(`${title}我是模板字符串`)
			// reactive版
			const strReactive = reactive({
				str:'我是reactive版'
			})
			// reactive版-模板字符串
			const strReactiveTem = reactive({
				str:`${strRef.value}-模板字符串`
			})
			// 字符串重新赋值
			setTimeout(()=>{
				strRef.value = '我是ref版-2s后'
				strReactive.str = '我是reactive版-2s后'
			},2000)
			
			// 数字
			// ref版 也可以用 ref<number>(100)
			const numRef = ref(100)
			// reactive版
			const numReactive = reactive({
				num:100
			})
			
			// 布尔
			// ref版 也可以用 ref<boolean>(false)
			const booRef = ref(false)
			// reactive版
			const booReactive = reactive({
				boo:true
			})
			
			// 数组
			// ref版 也可以用 ref<object[]>([1,2,3,4])
			const arrRef = ref(['我','是','数','组'])
			// reactive版
			const arrReactive = reactive({
				arr:['上','面','说','的','没','错']
			})
			
			// 不限制类型
			const time = ref<any>(null)
			const timeTam = ref(0)
			time.value = setInterval(()=>{
				timeTam.value++;
			},1000)
			setTimeout(()=>{
				clearInterval(time.value)
			},10000)
			
			// 对象
			const objRef = ref({name:'林',age:18})
			// reactive版
			const objReactive = reactive({
				name:'吴',
				age:11
			})
			return{
				strRef,
				strRefTem,
				strReactive,
				strReactiveTem,
				numRef,
				numReactive,
				booRef,
				booReactive,
				arrRef,
				arrReactive,
				time,
				timeTam,
				objRef,
				objReactive
			}
		}
	})
</script>

<style>
	.index-title{
		font-size: 24px;
		font-weight: bold;
	}
	.title{
		font-weight: bold;
		font-size: 20px;
		padding-top: 20px;
		padding-left: 20px;
	}
	.title-sub{
		padding-left: 40px;
		margin-top: 10px;
	}
	.flex{
		display: flex;
		align-items: center;
	}
</style>

从上面的代码来看,setup比setup()方便的多,毕竟少了return,其他地方没什么改变,都一样
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/187092.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

量子计算 | 解密著名量子算法Shor算法和Grover算法

专栏集锦&#xff0c;大佬们可以收藏以备不时之需 Spring Cloud实战专栏&#xff1a;https://blog.csdn.net/superdangbo/category_9270827.html Python 实战专栏&#xff1a;https://blog.csdn.net/superdangbo/category_9271194.html Logback 详解专栏&#xff1a;https:/…

数字化转型如何赋能企业实现数字化增值?

随着科技的不断发展&#xff0c;数字化转型已经成为了企业营销的重要趋势。数字化转型不仅可以提高企业的运营效率&#xff0c;还可以更好地满足消费者的需求&#xff0c;提升企业的市场竞争力。 一、数字化转型可以提高企业营销的精准性 在传统的企业营销中&#xff0c;营销人…

FreeRTOS学习之路,以STM32F103C8T6为实验MCU(2-5:队列)

学习之路主要为FreeRTOS操作系统在STM32F103&#xff08;STM32F103C8T6&#xff09;上的运用&#xff0c;采用的是标准库编程的方式&#xff0c;使用的IDE为KEIL5。 注意&#xff01;&#xff01;&#xff01;本学习之路可以通过购买STM32最小系统板以及部分配件的方式进行学习…

Robust taboo search for the quadratic assignment problem-二次分配问题的鲁棒禁忌搜索

文章目录 摘要关键字结论研究背景1. Introduction 常用基础理论知识2. The quadratic assignment problem3. Taboo search3.1. Moves3.2 Taboo list3.3. Aspiration function3.4. Taboo list size4. Random problems5. Parallel taboo search 研究内容、成果7. Conclusion 潜在…

Spring AOP:什么是AOP? 为什么要用AOP?如何学习AOP?

文章目录 &#x1f386;前言1.为什么要用 AOP3.如何学习去 AOP?3.1 AOP 的组成切面&#xff08;Aspect&#xff09;连接点&#xff08;Join Point&#xff09;切点&#xff08;Pointcut&#xff09;通知&#xff08;Advice&#xff09; 3. Spring AOP 实现3.1 普通的方式实现 …

画中画视频剪辑:如何实现多画面融合,提升创作质量

在视频剪辑的过程中&#xff0c;画中画是一种常见的技巧&#xff0c;它能够将多个画面融合在一起&#xff0c;创造出一种独特的效果&#xff0c;增强视频的观赏性和表现力。这种技巧常常用于电影、电视和广告中&#xff0c;以增加视觉冲击力&#xff0c;引导注意力&#xff0c;…

系列十五、BeanDefinition

一、BeanDefinition 1.1、概述 BeanDefinition是一个接口&#xff0c;主要负责存储bean的定义信息&#xff0c;决定bean的生产方式&#xff0c;类似于说明书。后续BeanFactory就可以根据这些信息生产bean了。比如实例化&#xff1a;可以通过反射得到实例对象&#xff1b;比如&…

人工智能Keras图像分类器(CNN卷积神经网络的图片识别篇)

上期文章我们分享了人工智能Keras图像分类器(CNN卷积神经网络的图片识别的训练模型),本期我们使用预训练模型对图片进行识别:Keras CNN卷积神经网络模型训练 导入第三方库 from keras.preprocessing.image import img_to_array from keras.models import load_model impor…

宝塔 Linux 面板安装一个高大上的论坛程序 —— Flarum

这个是很早搭建的版本,基于宝塔面板,比较复杂,如果想要简单的搭建方法,可以参看咕咕新写的这篇: 【好玩的 Docker 项目】10 分钟搭建一个高大上的论坛程序 购买腾讯云轻量应用服务器 待补充 登录服务器 待补充 BBR 加速脚本 BBR 加速脚本: BASH cd /usr/src &…

Springboot3+vue3从0到1开发实战项目(一)

一. 可以在本项目里面自由发挥拓展 二. 知识整合项目使用到的技术 后端开发 &#xff1a; Validation, Mybatis,Redis, Junit,SpringBoot3 &#xff0c;mysql&#xff0c;Swagger, JDK17 &#xff0c;JWT&#xff0c;项目部署 前端开发&#xff1a; Vue3&#xff0c;Vite&am…

类和对象(4)——补充内容+DateOJ题

Date类型的OJ 一&#xff0c;static成员例题 二&#xff0c;DateOJ题一&#xff0c;[计算日期到天数转换](https://www.nowcoder.com/practice/769d45d455fe40b385ba32f97e7bcded?tpId37&&tqId21296&rp1&ru/activity/oj&qru/ta/huawei/question-ranking)1…

【阿里云】图像识别 智能分类识别 增加垃圾桶开关盖功能点和OLED显示功能点(二)

一、增加垃圾桶开关盖功能 环境准备 二、PWM 频率的公式 三、pthread_detach分离线程&#xff0c;使其在退出时能够自动释放资源 四、具体代码实现 图像识别数据及调试信息wget-log打印日志文件 五、增加OLED显示功能 六、功能点实现语音交互视频 一、增加垃圾桶开关盖功能…

Linux:创建进程 -- fork,到底是什么?

相信大家在初学进程时&#xff0c;对fork函数创建进程一定会有很多的困惑&#xff0c;比如&#xff1a; 1.fork做了什么事情?? 2.为什么fork函数会有两个返回值?3.为什么fork的两个返回值&#xff0c;会给父进程谅回子进程pid&#xff0c;给子进程返回0?4.fork之后:父子进…

Oracle SQL 注入上的 Django GIS 函数和聚合漏洞 (CVE-2020-9402)

漏洞描述 Django 于2020年3 月4日发布了一个安全更新&#xff0c;修复了 GIS 函数和聚合中的 SQL 注入漏洞。 参考链接&#xff1a; Django security releases issued: 3.0.4, 2.2.11, and 1.11.29 | Weblog | Django 该漏洞要求开发者使用 JSONField/HStoreField;此外&…

Windows环境搭建

Windows环境搭建 一. jdk1.8安装1. 资源链接2. 安装3. 配置环境变量 一. jdk1.8安装 1. 资源链接 资源链接 提取码&#xff1a;tfms 2. 安装 1.双击下载好的JDK,点击下一步。 2.修改默认目录&#xff08;可不修改&#xff09;&#xff0c;点击下一步&#xff0c; 3. 点击下…

YB4556 28V、1A、单节、线性锂电池充电IC

YB4556 28V 、 1A 、单节、线性锂电池充电 IC 概述: YB4556H 是一款完整的采用恒定电流 / 恒定电压的高压、大电流、单节锂离子电池线性充电 IC。最高耐压可达 28V&#xff0c;6.5V 自动过压保护&#xff0c;充电电流可达 1A。由于采用了内部 PMOSFET 架构&#xff0c;加上防倒…

PHP 针对mysql 自动生成数据字典

PHP 针对mysql 自动生成数据字典 确保php 可以正常使用mysqli 扩展 这里还需要注意 数据库密码 如果密码中有特殊字符 如&#xff1a; 首先&#xff0c;我们需要了解MySQL中的特殊字符包括哪些。MySQL中的特殊字符主要包括以下几类&#xff1a; 1. 单引号&#xff08;&a…

京东数据采集接口推荐(京东大数据分析工具)

随着京东电商平台的不断发展&#xff0c;平台中店铺数量也越来越多&#xff0c;对于电商卖家而言&#xff0c;在电商运营过程中如何做好数据分析也越来越重要。而电商运营数据往往多而杂&#xff0c;想要高效的完成电商数据分析&#xff0c;品牌需要借助一些电商数据分析软件。…

给虚拟机配置静态id地址

1.令人头大的原因 当连接虚拟机的时候 地址不一会就改变&#xff0c;每次都要重新输入 2.配置虚拟机静态id地址 打开命令窗口执行 : vim /etc/sysconfig/network-scripts/ifcfg-ens33 按下面操作修改 查看自己子网掩码 3.重启网络 命令行输入 systemctl restart netwo…

物流公司打印用什么软件,佳易王物流运单打印管理系统软件下载

物流公司打印用什么软件&#xff0c;佳易王物流运单打印管理系统软件下载 软件特色&#xff1a; 1、功能实用&#xff0c;操作简单&#xff0c;不会电脑也会操作&#xff0c;软件免安装&#xff0c;已内置数据库。 2、物流开单打印&#xff0c;可以打印两联单或三联单&#x…