computed计算属性

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

<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>