vue3给对象赋值

在 Vue3 中，可以使用 `v-model` 指令或 `v-bind` 指令来给对象赋值。

1. 使用 v-model

假设有一个对象 `user`，其中包含名字和年龄两个属性：

const user = {
  name: 'Tom',
  age: 18
}

在模板中，可以使用 `v-model` 指令来给这个对象赋值：

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

<script>
export default {
  data() {
    return {
      user: {
        name: 'Tom',
        age: 18
      }
    }
  }
}
</script>

上面的例子中，我们使用了 `v-model` 指令来实现双向绑定，当用户在输入框中输入内容时，会自动更新 `user` 对象中对应的属性值。

注意，如果要绑定的属性是数字类型，需要使用 `v-model.number`。

2. 使用 v-bind

另一种方法是使用 `v-bind` 指令来给对象赋值：

<template>
  <div>
    <input v-bind:value="user.name" @input="updateName" />
    <input v-bind:value="user.age" @input="updateAge" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'Tom',
        age: 18
      }
    }
  },
  methods: {
    updateName(event) {
      this.user.name = event.target.value
    },
    updateAge(event) {
      this.user.age = event.target.value
    }
  }
}
</script>

上面的例子中，我们使用了 `v-bind` 指令来绑定输入框的值，并在输入框的 `input` 事件中手动更新 `user` 对象的属性值。