计算属性
注意，和Vue2一样，在很多时候使用计算属性和使用函数在一定程度上效果相同，但是如果你需要显示在页面上，请使用计算属性而非函数
<template>
姓<input type="text" v-model="firstName"><br>
名<input type="text" v-model="lastName"><br>
{{ fullName }}
</template>
<script setup lang="ts">
import {ref} from "vue";
var firstName=ref("");
var lastName=ref("");
let fullName=computed(()=>{
return firstName.value+" "+lastName.value;
})
</script>
<style>
</style>注意：如果要使用函数代替计算属性，需要在HTML中调用添加上()
<template>
姓<input type="text" v-model="firstName"><br>
名<input type="text" v-model="lastName"><br>
{{ getFullName() }}
</template>
<script setup lang="ts">
import {ref} from "vue";
var firstName=ref("");
var lastName=ref("");
function getFullName(){
return firstName.value+" "+lastName.value;
}
</script>
<style>
</style>