美文网首页
chatgpt的答案

chatgpt的答案

作者: 晗笑书生 | 来源:发表于2023-03-13 20:29 被阅读0次

vue3 v-model 怎么绑定一个对象

在 Vue3 中,可以使用v-model指令来实现双向数据绑定。如果要绑定一个对象,可以将v-model绑定到一个computed属性,该computed属性返回一个对象。例如:

<template>
  <div>
    <input v-model="name"/>
    <input v-model="age"/>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const person = ref({
      name: '',
      age: 0
    })

    const personInfo = computed({
      get() {
        return person.value
      },
      set(value) {
        person.value = value
      }
    })

    return {
      name: personInfo.value.name,
      age: personInfo.value.age
    }
  }
}
</script>
image.png

相关文章

网友评论

      本文标题:chatgpt的答案

      本文链接:https://www.haomeiwen.com/subject/oczcrdtx.html