<template>
<div>
<div>
Surname:<input type="text" v-model="firstName">
</div>
<div>
Name:<input type="text" v-model="lastName">
</div>
<div>
Full name: {{ name }}
</div>
<div>
<button @click="changeName">modifications</button>
</div>
</div>
</template>
<script setup lang='ts'>
import { ref, computed } from 'vue';
/** computed
* computed supports both optional and functional writing.
* 1. optionally support an object passed into the getter function and setter function to customize the operation.
* 2. Functional writing can only support a getter function that does not allow modification of values.
*/
let firstName=ref('Zhang'));
let lastName=ref('three'));
// //1. optionally written support for an object passed into the get function as well as the set function to customize operations
// let name=computed<string>({
// get () {
// // Read value operations
// return + '-' +
// },
// set (newVal) {
// // Setting value operations
// [,] = ('-')
// }
// });
// const changeName = () => {
// = 'Oda'
// }
//2. Functional writing can only support a getter function does not allow modification of the value of the
let name = computed(() => + '-' + )
</script>
<style scoped>
</style>