【Vue3】2-10 : 表单处理与双向数据绑定原理

本书目录：点击进入

一、表单处理

1.1、【双向绑定】实现方式一：v-model

＞  代码 

＞  效果 

1.2、【双向绑定】实现方式二：:value属性 + input事件

＞  代码 

＞  效果 (同上)

二、实战

2.1 【v-model 示例】输入框 

＞  代码 + 效果 （见1.1）

2.2 【v-model 示例】单选框 

＞  代码 

＞  效果

2.3 【v-model 示例】复选框 

＞  代码 

＞  效果

2.4 【v-model 示例】下拉菜单

＞  代码 

＞  效果

---

一、表单处理

• 收集表单数据，发送给后端

• 把后端的数据进行回显

• v-model 指令 实现响应式数据的处理。原理相当于 :value属性 + input事件

• v-model除了可以处理输入框以外，也可以用在单选框、复选框、以及下拉菜单中。

 

1.1、【双向绑定】实现方式一：v-model

＞  代码 

 

＞  效果 

 

1.2、【双向绑定】实现方式二：:value属性 + input事件

＞  代码 

＞  效果 (同上)

二、实战

2.1 【v-model 示例】输入框 

＞  代码 + 效果 （见1.1）

2.2 【v-model 示例】单选框 

＞  代码 

  

    女

    男

    {{ gender }} 

  
  

＞  效果

 

2.3 【v-model 示例】复选框 

＞  代码 

  

    苹果

    西瓜

    哈密瓜

    {{ fruits }}

  

  

＞  效果

 

2.4 【v-model 示例】下拉菜单

＞  代码 

  

    
      北京
      上海
      杭州
    
    {{ city }}
  

  

＞  效果