computed计算属性

<template>
  <div>
    <input type="number" v-model="num1">
     + 
    <input type="number" v-model="num2">

    答案 : {{total}}

    <hr>
    <input type="text" v-model="name1">
    <input type="text" v-model="name2">
    <input type="text" v-model="allName">
  </div>
</template>

<script>

import {ref, computed} from 'vue'
export default {
  setup(){
    const num1 = ref(0)
    const num2 = ref(0)
    
    // 简写模式 : 
    const total = computed(()=>{
        return num1.value + num2.value
    })
    
    // 多方法模式 : 
    const name1 = ref('吴')
    const name2 = ref('吴腾')
    const allName = computed({
      get(){
        return name1.value + '-' + name2.value
      },
      set(newValue){
        const tempNames = newValue.split("-")
        name1.value = tempNames[0]
        name2.value = tempNames[1]
      }
    })

    return {
      num1,
      num2,
      total,
      allName,
      name1,
      name2
    }
  }
}
</script>