第七篇：vue3 计算属性：computed

v-model ="firstName".   // v-model.  就是双向绑定的意思

<br/>  // 通过 v-model  进行绑定姓：<input type="text" v-model ="firstName"><br/>名：<input type="text" v-model="lastName"><br/>全称：<span>!!!!!</span><br/><script lang="ts" setup name = "Person">
import {ref} from 'vue'// 这里数据的双向绑定  , 通过 ref 实现数据响应
let firstName = ref("zhan")
let lastName = ref("san")
</script>

计算属性——只读取，不修改

// 计算属性——只读取，不修改/* let fullName = computed(()=>{return firstName.value + '-' + lastName.value}) */

// 计算属性——既读取又修改
let fullName = computed({// 读取get(){return firstName.value + '-' + lastName.value},// 修改set(val){   // 这里把值赋值给 对应的文本框console.log('有人修改了fullName',val)firstName.value = val.split('-')[0]lastName.value = val.split('-')[1]}})function changeName(){fullName.value = "li-si"console.log(fullName.value)}

<div class="person">姓：<input type="text" v-model="firstName"> <br>名：<input type="text" v-model="lastName"> <br>全名：<span>{{fullName}}</span> <br><button @click="changeFullName">全名改为：li-si</button></div>