vue中v-model语法糖详解

2024-08-31

字数：318字 | 预计阅读时长：1分钟

1. 基本用法

v-model 是 Vue.js 中的一个重要指令，用于在表单输入和应用状态之间建立双向绑定。它简化了用户输入和应用程序数据之间的同步过程。

v-model 可以在各种表单元素上使用，如 <input>、<textarea>、<select> 等。它会根据元素的类型自动选择正确的方法来更新数据。

输入框 input:text ——> value
文本域 textarea ——> value
复选框 input:checkbox ——> checked
单选框 input:radio ——> checked
下拉菜单 select ——> value

<template>
  <div>
    <input v-model="message" placeholder="输入一些内容">
    <p>输入的内容是: {{ message }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

工作原理
v-model 在内部使用不同的属性和事件来实现双向绑定：

对于文本输入框（<input type="text">）和文本区域（<textarea>），它使用 value 属性和 input 事件。
对于单选按钮（<input type="radio">）和复选框（<input type="checkbox">），它使用 checked 属性和 change 事件。
对于选择框（<select>），它使用 value 属性和 change 事件。