第七篇：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>