论v-model的等价写法

v-model 是 Vue 中实现双向数据绑定的语法糖，其等价写法为 属性绑定（:value） + 事件监听（@input），但具体实现细节因应用场景（表单元素/自定义组件）和 Vue 版本（Vue2/Vue3）略有不同。

---

一、基础场景：表单元素的原生实现

1. <input> 或 <textarea> 的等价写法

• v-model 代码：

  <input v-model="message">
  

• 等价写法：

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

• 核心逻辑：
  将 value 属性与数据绑定，并在 input 事件触发时更新数据。v-model 自动处理了值的获取和赋值。

2. 复选框（checkbox）的等价写法

• v-model 代码：

  <input type="checkbox" v-model="isChecked">
  

• 等价写法：

  <input 
    type="checkbox" 
    :checked="isChecked" 
    @change="isChecked = $event.target.checked"
  >
  

• 差异点：
  使用 checked 属性和 change 事件（部分浏览器中 input 事件也能触发，但 change 更规范）。

3. 下拉框（select）的等价写法

• v-model 代码：

  <select v-model="selectedValue">