Vue3.0中computed的使用方法

447 阅读1分钟

基本

作用:computed 函数用来定义计算属性。

<template>
  <p>firstName: {{ person.firstName }}</p>
  <p>lastName: {{ person.lastName }}</p>
  <input type="text" v-model="person.fullName" />
</template>
<script>
  import { computed, reactive } from 'vue'
  export default {
    name: 'App',
    setup() {
      const person = reactive({
        firstName: '朱',
        lastName: '逸之'
      })
      // 也可以传入对象,目前和上面等价
      person.fullName = computed({
        get() {
          return person.firstName + ' ' + person.lastName
        },
        set(value) {
          const newArr = value.split(' ')
          person.firstName = newArr[0]
          person.lastName = newArr[1]
        }
      })
      return {
        person
      }
    }
  }
</script>