Vue v-model 怎么使用

在 Vue.js 中，v-model 是一个非常重要的指令，它用于在表单元素和 Vue 实例的数据之间创建双向绑定。通过 v-model，我们可以轻松地实现数据的同步更新，而无需手动编写事件监听器或更新逻辑。

基本用法

v-model 最常见的用法是在表单元素上，例如 <input>、<textarea> 和 <select>。以下是一个简单的例子：

<template>
  <div>
    <input v-model="message" placeholder="请输入内容">
    <p>你输入的内容是: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

在这个例子中，v-model 绑定了一个 message 数据属性。当用户在输入框中输入内容时，message 的值会自动更新，并且页面上显示的内容也会随之改变。

修饰符

v-model 还支持一些修饰符，用于控制数据的更新行为。

.lazy

默认情况下，v-model 会在每次 input 事件触发时同步数据。如果你希望数据在 change 事件（例如输入框失去焦点时）才同步，可以使用 .lazy 修饰符：

<input v-model.lazy="message">

.number

如果你希望用户输入的内容自动转换为数字类型，可以使用 .number 修饰符：

<input v-model.number="age" type="number">

.trim

如果你希望自动去除用户输入内容的首尾空白字符，可以使用 .trim 修饰符：

<input v-model.trim="username">

在自定义组件中使用 v-model

v-model 不仅可以在原生表单元素上使用，还可以在自定义组件中使用。默认情况下，v-model 在组件上会绑定 value prop 并监听 input 事件。以下是一个简单的自定义组件示例：

<template>
  <div>
    <custom-input v-model="message"></custom-input>
    <p>你输入的内容是: {{ message }}</p>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

在 CustomInput.vue 中，我们需要通过 model 选项来定义 v-model 的行为：

<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>

<script>
export default {
  props: ['value']
}
</script>

在这个例子中，CustomInput 组件接收一个 value prop，并在输入框的值发生变化时触发 input 事件，从而更新父组件中的 message 数据。

自定义 v-model 的行为

如果你希望在自定义组件中使用不同的 prop 和事件名称，可以通过 model 选项来配置：

<template>
  <div>
    <custom-input v-model="message"></custom-input>
    <p>你输入的内容是: {{ message }}</p>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

在 CustomInput.vue 中，我们可以这样配置：

<template>
  <input :value="text" @input="$emit('update:text', $event.target.value)">
</template>

<script>
export default {
  model: {
    prop: 'text',
    event: 'update:text'
  },
  props: ['text']
}
</script>

在这个例子中，v-model 绑定的 prop 是 text，事件名称是 update:text。

总结

v-model 是 Vue.js 中非常强大的一个指令，它简化了表单元素和组件之间的数据绑定。通过 v-model，我们可以轻松实现数据的双向绑定，并且可以通过修饰符和自定义配置来满足不同的需求。掌握 v-model 的使用，可以大大提高开发效率，减少代码量。