计算属性

计算属性

• 与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>