文章目录

• 探究Vue表单输入绑定v-model
• • 表单输入绑定
  • • 1. 基础语法 值绑定 v-model
    • • 1.1. 文本
      • 1.2. 单选按钮
      • 1.3. 复选框
      • 1.4. 选择框
      • 1.5.多行文本
      • 1.6. 提交按钮
    • 2. v-model 修饰符
    • • 2.1. .layz 在 change 事件_之后_进行同步 ,也可以理解为：失去焦点再收集数据；
      • 2.2. .number 将用户的输入值转为数值类型
      • 2.3. .trim 自动过滤用户输入的首尾空白字符
    • 3. 细节
    • • 3.1、点文字账号，密码，光标定位到相应input框中
      • 3.2、button 按钮
    • 4. 总结
    • 5. 案例

探究Vue表单输入绑定v-model

Vue 官网： https://cn.vuejs.org/v2/guide/forms.html
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 https://www.bilibili.com/

---

表单输入绑定 1. 基础语法 值绑定 v-model

说到表单，肯定会想到的就是form。form表单是一个包含表单元素的区域，允许用户在表单中
(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
form常用属性
name：规定表单的名称。
action：规定当提交表单时，向何处发送表单数据。默认为当前页面
method：规定如何发送表单数据（即提交方式，常用get或post），默认get

1.1. 文本

  	账号：
      


     密码：
     

1.2. 单选按钮

	性别：
	男：
	女：

1.3. 复选框

		爱好：
         抽烟
         喝酒
         汤头
        

1.4. 选择框

		所属校区：
        
            请选择校区
            上海
            天津
            北京
            西安
                    
        

1.5.多行文本

            其它信息：            
                        

1.6. 提交按钮

         提交
         
         

2. v-model 修饰符 2.1. .layz 在 change 事件_之后_进行同步 ,也可以理解为：失去焦点再收集数据；

            其它信息：            
                        

2.2. .number 将用户的输入值转为数值类型

 			年龄
            

2.3. .trim 自动过滤用户输入的首尾空白字符

			账号：
             

3. 细节 3.1、点文字账号，密码，光标定位到相应input框中

• 给label标签，添加for属性，其值与input标签的id属性的值相同，以在label和input之间创建关联，使input可以获取鼠标焦点

3.2、button 按钮

• button 按钮的默认类型为**submit **，当类型为 submit 时，就是有默认的提交行为(刷新当前页面)，

4. 总结

• 收集表彰数据：
  • 若： 则 v-model 收集的是value 值 ，用户输入的就是value 值。
  • 若： 则 v-model 收集的是value 值 ，且要给标签配置value 值。
  • 若：
    1. 没有配置input 的 value属性，那么收集的就是checked(勾选or 未勾选，是布尔值)
    2. 配置input 的value 属性
       1. v-model 的初始值 是非数组，那么收集的就是checked(勾选or 未勾选，是布尔值)
       2. v-model 的初始值 是数组，那么收集的就是value 组成的数组
    3. 备注：v-model的三个修饰符：
       1. lazy: 失去焦点再收集数据；
       2. number:输入字符串转为有效的数字
       3. trim:输入首尾空格过滤

5. 案例

        
你好,{{name}}
        

        
        

            账号：
             


            密码：
            


            性别：
            男：
            女：


             年龄
            


            爱好：
             抽烟
             喝酒
             汤头
            


            所属校区：
            
                请选择校区
                上海
                天津
                北京
                西安
                        


            其它信息：            
                        


            
            阅读并接受《用户协议》 
            提交
            

        
    
  

泰山不让土壤，故能成其大；河海不择细流，故能就其深。——西汉·司马迁《史记·李斯列传》

下面这副图片，你看到了什么，欢迎评论区留言
g

暑期编程PK赛 得CSDN机械键盘等精美礼品！