vue中v-model怎麼綁定一個對象

在 Vue 中使用 v-model 綁定物件時，需將 v-model 綁定到物件屬性，即。資料更新時，物件屬性與 Vue 實例資料將自動雙向更新。

在Vue 中使用v-model 綁定物件

Vue.js 中的v-model 指令可用於在HTML 元素和Vue 實例資料之間建立雙向資料綁定。然而，v-model 通常用於綁定簡單的資料類型，如字串或數字。

綁定物件到v-model

要將一個物件綁定到v-model，可以使用以下方法：

<code class="html"><input v-model="object.property"></code>

其中：

• object 是包含要綁定的物件的Vue 實例屬性。
• property 是物件中的屬性，用於進行資料綁定。

物件屬性的更新

輸入或修改表單元素時，對object.property 的任何變更都會自動反映在Vue實例中，反之亦然。

範例

以下範例展示如何將一個物件的name 屬性綁定到一個輸入框：

<code class="html"><template>
  <div>
    <input v-model="user.name">
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'John Doe'
      }
    }
  }
}
</script></code>

當使用者輸入新的值時，user.name 屬性將會相應更新，反之亦然。

以上是vue中v-model怎麼綁定一個對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！