前端Wiki/词条/v-model 双向绑定

v-model 双向绑定

定义表单控件与数据之间的双向绑定：输入即更新数据，数据更新即回显

v-model 是「:value + @input」的语法糖：等价于。数据变了输入框回显，用户输入了数据更新——这就是「双向绑定」。修饰符让它更精细：.lazy（change 时才同步而非 input）、.number（自动转数字）、.trim（去首尾空格）。

组件上的 v-model 是父子通信的协议：默认绑定 modelValue + 触发 update:modelValue。Vue 3 支持多个 v-model（v-model:title="x" 各自独立），自定义组件双向通信不再需要 .sync。

表单 v-model = :value + @input 语法糖；.lazy/.number/.trim 常用修饰符
组件 v-model：modelValue prop + update:modelValue 事件
Vue 3 支持多个具名 v-model（v-model:title、v-model:open）

HTML

<div id="app">
  <!-- 基础修饰符 -->
  <input v-model.lazy.trim="msg" placeholder="失焦去空格同步">
  <p>你说：{{ msg }}</p>

  <!-- 复选框/单选/下拉都自动适配 -->
  <select v-model="city">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
  </select>
</div>

<!-- 自定义组件的双向绑定 -->
<!-- MyInput.vue -->
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>
<script setup>
defineProps(['modelValue']);
defineEmits(['update:modelValue']);
</script>
&lt;!-- 用法：<MyInput v-model="msg" /&gt; --&gt;

⚠ 常见误区

{{ }} 与 v-model 混用：v-model 已含双向绑定，再绑 :value 会冲突告警
组件 v-model 忘了声明 emits，事件发不出去
.number 修饰符下输入空串得到 0/，校验逻辑要单独处理边界

🔗 相关词条计算属性与侦听器组合式 API Vue 是什么