vue的lazy修饰符和number修饰符 、表单结构

vue的lazy修饰符


在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转为在 change 事件_之后_进行同步。


意思是什么呢,就是说当我们在input输入框输入数据时,v-model绑定的值不会发发生变化,但是当我们停止输入,输入框失去焦点或者按下回车时,v-model绑定的值才会发生变化,即在“change”时而非“input”时更新:
 



 

    
    
    
    Document

 

 
    
                {{ msg }}    
             

vue的number修饰符


自动将用户的输入值转为数值类型。
这个修饰符通常很有用,因为即使在 type=“number” 时,HTML 输入元素的值也总会返回字符串。如果这个值无法被parseFloat() 解析,则会返回原始的值。即虽然你输入的是数字,但它的类型其实是String:


 

vue的trim修饰符


自动过滤用户输入的首尾空白字符。


 

表单的构成


提示性文字:提示用户如何操作(一般由placeholder属性完成)
表单域:相当于一个容器,包含若干表单控件
表单控件:具体的功能项(按钮,下拉列表,输入框等)


表单域


表单内容

表单控件 


(1)input:输入框。都有value属性,通过用户输入信息将value属性的值提交给远程服务器并保存。

单行文本框:
密码框:
数字输入框:
颜色输入框:
文件选择框(通常用于上传文件):
单选按钮: 文本   (check是让表单进入后先默认选择此选项   name值相同则是让此文本选项为单选,不可同时选择相同name值的选项)
复选按钮:  (此处的value表示的事按钮显示出来的文本内容)
提交按钮:  (必须放在

中有效  )
重置按钮:  (必须放在
中有效  )
普通按钮:


(2)select:下拉列表

                     

(3)textarea:文本框(多行文本输入框,用户可以调节放大缩小)

                                                                                                                                                                                  请输入验证码                                                                                    
             /*此处rowspan是使单元格跨行*/                        
                                                      
   

你可能感兴趣的:(javascript,前端,vue.js)