一个使用get和set函数的计算属性computed的例子

hamimelon2020

于 2023-05-08 20:40:15 发布

阅读量123

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_40945354/article/details/130566920

版权

该代码示例展示了在Vue.js中如何使用`ref`和`computed`属性来创建和管理响应式数据。`firstName`和`lastName`是通过`ref`定义的，而`fullName`是计算属性，用于获取或设置完整的姓名。当`fullName`的值改变时，它会更新`firstName`和`lastName`的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import { ref, computed } from "vue"

export default {
  setup() {
    const firstName = ref("John")
    const lastName = ref("Doe")

    const fullName = computed({
      get: () => `${firstName.value} ${lastName.value}`,
      set: (value) => {
        const [newFirstName, newLastName] = value.split(" ")
        firstName.value = newFirstName
        lastName.value = newLastName
      },
    })

    console.log(fullName.value) // output: "John Doe"
    fullName.value = "Jane Smith"
    console.log(firstName.value) // output: "Jane"
    console.log(lastName.value) // output: "Smith"

    return {
      firstName,
      lastName,
      fullName,
    }
  },
}