Vue:数据双向绑定

Vue 的 v-model 实现了表单元素与数据的双向绑定。当数据变化时，视图自动更新；当用户通过视图修改内容时，数据也会同步变化。这种设计简化了表单交互的逻辑。

---

基础用法

<template>＜div＞<!-- 输入框与数据双向绑定 --><input v-model="message" placeholder="输入内容"><p＞你输入的内容是：{{ message }}＜/p＞<!-- 文本域 --><textarea v-model="text"＞＜/textarea＞<!-- 下拉选择 --><select v-model="selected"><option value="A"＞选项A＜/option＞<option value="B"＞选项B＜/option＞</select＞＜/div＞
</template＞<script＞
export default {data() {return {message: "",text: "",selected: "A"};}
};
</script＞

---

处理复选框（Checkbox）

单个复选框（绑定布尔值）

<template＞＜div＞<input type="checkbox" v-model="isChecked"> 是否同意＜/div＞
</template＞<script＞
export default {data() {return { isChecked: false }}
};
</script＞

多个复选框（绑定数组）

<template＞＜div＞<input type="checkbox" value="游泳" v-model="hobbies"> 游泳<input type="checkbox" value="跑步" v-model="hobbies"> 跑步<p＞选择的爱好：{{ hobbies }}＜/p＞＜/div＞
</template＞<script＞
export default {data() {return { hobbies: [] }  // 必须是数组}
};
</script＞

---

处理单选框（Radio）

<template＞＜div＞<input type="radio" value="男" v-model="gender"> 男<input type="radio" value="女" v-model="gender"> 女＜/div＞
</template＞<script＞
export default {data() {return { gender: "男" }}
};
</script＞

---

修饰符（Modifiers）

.lazy

将同步时机从 input 事件改为 change 事件（输入框失去焦点时更新）：

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

.number

自动将输入值转为数字类型：

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

.trim

自动去除首尾空格：

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

---

原理浅析

v-model 本质是一个语法糖，相当于同时使用 v-bind 和 v-on。比如对于输入框：

<input :value="message" @input="message = $event.target.value"
>

等价于：

<input v-model="message">

---

自定义组件中使用

在自定义组件中，v-model 默认绑定 value 属性和监听 input 事件。例如：

＜!-- 子组件 --＞
＜custom-input v-model="msg"＞＜/custom-input＞＜!-- 等价于 --＞
＜custom-input :value="msg" @input="msg = $event"
＞＜/custom-input＞

在子组件内部通过 props 接收和 $emit 触发：

// 子组件代码
export default {props: ['value'],methods: {handleInput(e) {this.$emit('input', e.target.value);}}
}