用于解决template
模板中诸如三元运算符的条件过于复杂时导致模板臃肿和难以维护,所以可以采用计算属性
ref
,需要通过.value
访问ts<script setup>
const userinfo = reactive({
age: 18,
})
// 一个计算属性 ref
const isMan = computed(() => {
return userinfo > 18 ? '成年人' : '孩子'
})
</script>
<template>
<span>{{ isMan }}</span>
</template>
计算属性会根据返回值的类型自动推导其类型
ts<script setup>
const userinfo = reactive({
age: 18,
})
// 自动推导类型为 globalThis.ComputedRef<"成年人" | "孩子">
const isMan = computed(() => {
return userinfo.age > 18 ? '成年人' : '孩子'
})
</script>
<template>
<span>{{ isMan }}</span>
</template>
通过computed<T>
显示指定类型
<script setup> const userinfo = reactive({ age: 18, }) // 自动推导类型为 globalThis.ComputedRef<string> const isMan = computed<string>(() => { return userinfo.age > 18 ? '成年人' : '孩子' }) </script> <template> <span>{{ isMan }}</span> </template>
本文作者:RKLS
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!