計算屬性

• 與Vue2.x中computed配置功能一致

寫法案例 : 

<template>
  <div class="about">
      <h1>計算屬性</h1>
      姓 : <input type="text" v-model="firstName">
      <br> 
      名 : <input type="text" v-model="lastName">
      <br>
      全名(計算屬性簡寫) : <input type="text"
 
 v-model="fullName">
      <hr>
      全名(完整形式) : <input type="text" v-model="fullName1">
  </div>
</template>
<script>
import { reactive, ref ,computed } from 'vue'
export default {
  setup(){
    let firstName = ref('吳')
    let lastName = ref('某騰')

    // 計算屬性簡寫
    let fullName 
 
= computed(()=>{
      console.log('計算屬性觸發了')
      return firstName.value + '-' + lastName.value
    })

    // 計算屬性完整
    let fullName1 = computed({
      get(){
        return firstName.value + '-' + lastName.value
      },
      set(val){
        let value = val.split('-')
        firstName.value 
 
= value[0]
        lastName.value = value[1]
      }
    })

    return {firstName,lastName,fullName,fullName1};
  }
}
</script>

 寫法案例 : 寫在屬性裡面的

<template>
  <div class="about">
      <h1>計算屬性</h1>
      姓 : <input type="text" v-model="data.firstName">
      <br> 
      名 : <input type="text" v-model="data.lastName">
      <br>
      全名(計算屬性簡寫) : <input type="text" v-model="data.fullName">
      <hr>
      全名(完整形式) : <input type="text" v-model="data.fullName1">
  </div>
</template>
<script>
import { reactive, ref ,computed } from 'vue'
export default {
  setup(){
    let data = reactive({
      firstName : '吳',
      lastName : '某騰',
      fullName : computed(()=>{
        return data.firstName + '-' + data.lastName
      }),
      fullName1: computed({
        get(){
          return data.firstName + '-' + data.lastName
        },
        set(va){
          let value = va.split('-')
          data.firstName = value[0]
          data.lastName = value[1]
        }
      })
    })
    return {data};
  }
}
</script>