Vue，如何使用v-model

v-model是Vue中的指令，可以创建双向绑定。学习如何使用它。

v-model指令可以创建双向绑定。

你可以绑定一个表单输入元素，当用户改变字段的内容时，可以实时改变Vue的数据属性：

1 2	<input v-model="message" placeholder="请输入消息"> <p>消息是：{{ message }}</p>

<select v-model="selected">
  <option disabled value="">选择一种水果</option>
  <option>苹果</option>
  <option>香蕉</option>
  <option>草莓</option>
</select>
<span>选择的水果：{{ selected }}</span>

常用的指令修饰符

如果只想在发生更改事件时更新模型，而不是在用户按下键时更新，可以使用v-model.lazy代替v-model。

当使用输入字段时，v-model.trim非常有用，因为它会自动去除输入内容的空格。

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

嵌套属性

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

<template>
  <div>
    <h1>添加产品</h1>
    <label>名称</label>: <input>
    <label>描述</label>: <textarea></textarea>
    <button @click="addProduct">添加</button>
  </div>
</template>

<script>
export default {
  name: 'AddProduct',
  data() {
    return {
      product: {
        name: '',
        description: ''
      }
    }
  },
  methods: {
    addProduct() {
      console.log(this.product)
    }
  }
}
</script>

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

1 2	<label>名称</label>: <input v-model="product.name"> <label>描述</label>: <textarea v-model="product.description"></textarea>

tags: [“Vue”, “v-model”, “双向绑定”, “指令”, “组件”]