<template> <!-- vue3组件中的模板结构可以没有根标签 --> <h1>一个人的信息</h1> 姓:<input type="text" v-model="person.firstName"><br> 名:<input type="text" v-model="person.lastName"><br> 全名:{{fullName}} </template> <script> import {reactive,computed} from 'vue' export default { name: 'Demo', setup() { let person = reactive({ firstName: '张', lastName: '三' }) //计算属性——简写 let fullName = computed(()=>{ return person.firstName + '-' + person.lastName }) //计算属性——完整 // let fullName = computed({ // get(){ // return person.firstName + '-' + person.lastName // }, // set(value){ // const nameArr = value.split('-') // person.firstName = nameArr[0] // person.lastName = nameArr[1] // } // }) //setup的返回值,返回一个对象 return{ person,fullName } } } </script> <style> </style>