<template>
<div class="home">
{{inf}}
<button @click="getname('灰太狼')">点击变换形态</button>
<div>vue3+ts {{com}}</div>
</div>
</template>
<script lang="ts">
import { defineComponent,reactive,toRefs,ref,computed} from 'vue';
interface user{
inf:string;
arr:[];
getname(agr:string):void;//传入一个字符 返回类型任意
getactive():string; //定义一个方法，必须返回字符串
}
export default defineComponent({
setup(props) {
//进行校验，方法和类型全部对应起来，不然会报错
const user:user = reactive({
inf:'喜洋洋',
arr:[],
getname(agr:string){
this.inf=agr;
},
getactive(){
return '123'
}
})
//三张类型的写法
// const user:user = reactive({})
// const user = reactive<user>({})
// const user = reactive({}) as user
//ref的定义 使用泛型
let conu=ref<number| string>("20")
//计算属性
let com=computed<number>(()=>{
return 1+2;
})
//必须返回
return {
...toRefs(user),
conu,
com
}
}
});
</script>
vue3 +ts 集合api使用 setup resf computed torefs
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 首先，尝试一下计算属性computed 第一种写法 修改age，nextAge会跟着自动+1 但如果修改nextA...
- 同时支持vue2 vue3 React，支持默认安装的 swiper8 版本，支持 TS ，无论是不是TS项目都可...
- vue3中的setup有什么用?setup的设计是为了使用组合式api[https://v3.cn.vuejs.o...
