Vue，如何使用v模型

v-model Vue指令允许我们创建双向绑定。了解如何使用它

这v-modelVue指令允许我们创建双向绑定。

您可以绑定一个表单输入元素，例如，当用户更改字段内容时，使其更改Vue数据属性：

<input v-model="message" placeholder="Enter a message">
<p>Message is: {{ message }}</p>

<select v-model="selected">
  <option disabled value="">Choose a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
  <option>Strawberry</option>
</select>
<span>Fruit chosen: {{ selected }}</span>

方便的指令修饰符

要在发生更改事件时（而不是在用户每次按键时）进行模型更新，可以使用v-model.lazy而不只是v.model。

使用输入字段，v-model.trim很有用，因为它会自动删除空格。

如果您接受的是数字而不是字符串，请确保使用v-model.number。

嵌套属性

假设您有一个购物车，并且您有一个包含用于添加产品的表单的组件：

<template>
  <div class="">
    <h1>Add Product</h1>
    <label>Name</label>: <input>
    <label>Description</label>: <textarea></textarea>
    <button @click="addProduct">Add</button>
  </div>
</template>
<script>
export default {
name: ‘AddProduct’,
data() {
return {
product: {
name: ‘’,
description: ‘’
}
}
},
methods: {
addProduct() {
console.log(this.product)
}
}
}
</script>

为了使表单更新内部属性product状态值，您使用product.*：

<label>Name</label>: <input v-model="product.name">
<label>Description</label>: <textarea v-model="product.description"></textarea>

免费下载我的Vue手册

Vue，如何使用v模型

v-model Vue指令允许我们创建双向绑定。了解如何使用它

方便的指令修饰符

嵌套属性

更多vue教程：