首页 > 其他分享 >vue3组合式 API_为 computed() 标注类型

vue3组合式 API_为 computed() 标注类型

时间:2023-07-21 15:23:34浏览次数:44  
标签:count const computed value API vue3 ref doubleCount

image-20230131102803448

computed() 会自动从其计算函数的返回值上推导出类型

<template>
 <h3>{{ doubleCount }}</h3>
</template>

<script setup lang="ts">
import { ref,computed } from "vue"
const count = ref<number>(100)
// 推导得到的类型:ComputedRef<number>
const doubleCount = computed(() => count.value * 2)
// Property 'split' does not exist on type 'number'
const result = doubleCount.value.split('');
</script>

你还可以通过泛型参数显式指定类型

<template>
 <h3>{{ doubleCount }}</h3>
</template>

<script setup lang="ts">
import { ref,computed } from "vue"
const count = ref<number>(100)
const doubleCount = computed<number>(() => {
 // 若返回值不是 number 类型则会报错
 return count.value * 2
})
</script>

 

标签:count,const,computed,value,API,vue3,ref,doubleCount
From: https://www.cnblogs.com/junjuna/p/17571477.html

相关文章

  • 以程序员为视角,关于商品详情API接口的说明
    ​商品详情API接口是现代电商平台中非常重要的一部分,它提供了获取淘宝商品详细信息的能力。作为一个程序员,了解如何调用这个API接口是非常关键的。首先,我们需要明确的是,API接口是应用程序与服务器之间进行通信和数据交换的一种方式。在调用商品详情API接口之前,我们需要先获得相......
  • API管理中的一些难点及Apipost如何解决
    API管理已经成为了现代软件开发和企业IT架构中不可或缺的一部分。随着API数量和复杂性的增加,API的管理也变成了一道难题。那么Api管理存在哪些难点及如何解决呢,看完本篇文章相信你一定有所收获。API文档管理难点API文档需要提供清晰的API功能、参数、请求和响应,以便开发人员可以......
  • 个人微信API接口,WeChat机器人
    本篇文章主要讨论微信机器人的开发经验。微信机器人的功能需求很简单,业务代码贼好撸,但是如何和微信交互呢,如何取到微信数据调用相关聊天接口呢,具体分为以下几种技术类型:1.微信Web接口17年后微信都不支持了,不过还是有一些牛×的star都是过Wstar的项目,可惜荒废了。2.手机Xposed......
  • vue3中组合式 API_为 reactive() 标注类型
    reactive() 也会隐式地从它的参数中推导类型<template><h3>{{book.title}}</h3><h3>{{book.author}}</h3></template><scriptsetuplang="ts">import{reactive}from"vue"constbook=reactive({title......
  • 高效 API 接口对接淘宝天猫 1688 拼多多京东商品详情数据(H5 端,PC 端)
    api接口详解大全?优秀的设计是产品变得卓越的原因设计API意味着提供有效的接口,可以帮助API使用者更好地了解、使用和集成,同时帮助人们有效地维护它每个产品都需要使用手册,API也不例外在API领域,可以将设计视为服务器和客户端之间的协议进行建模API协议可以帮助内部和外部......
  • Vue3 响应式全局对象json 动态绑定界面三 (Div块样式 字符串叠加)
    效果 man.js  定义响应式全局对象 globalData//全局对象constglobalData=reactive({missedCallData:"",currentUserTel:"",})app.provide('globalData',globalData);在main.js的函数中改变missedCallData 的值从而改变界面列表//改变全局变量gl......
  • Vue3 响应式全局对象json 动态绑定界面四 (Div块样式 Json数据绑定)
    效果man.js  定义响应式全局对象 globalData//全局对象constglobalData=reactive({extTelTalkData:[{userExten:"1000",userName:"刘亦菲",callStatus:"通话"},{......
  • Vue3 响应式全局对象json 动态绑定界面二 (方块矩阵样式)
    效果main.js//全局对象constglobalData=reactive({extTelMonitorData:[{title:'用户组一',list:[{groupID:"0",groupName:"AllUsers",......
  • java调取高德api获取经纬度
    //privatestaticfinalStringAPI_URL="https://restapi.amap.com/v3/geocode/geo";//privatestaticfinalStringKEY="f67db737cf6f8095e56a35f3";@Overridepublicvoidinvoke(WasteRoomInfoExcelDTOwasteRoomInfoExcelDTO,Analys......
  • 个微API接口 个人微信机器人
     简要描述:下载消息中的文件请求URL:http://域名地址/getMsgFile请求方式:POST请求头Headers:Content-Type:application/jsonAuthorization:login接口返回参数:参数名必选类型说明wId是string登录实例标识 包含此参数所有参数都是从消息回调中取)msgId......