vue 修饰符

.lazy

默认情况下 v-model默认是在input事件中同步输入框的数据的
lazy可以让数据在失去焦点或者回车时才会更新

    <div id="app">
        <!-- 事件修饰符.lazy(懒惰)不会即时的将输入框的内容存放如data -->
        <input v-model.lazy="msg">
        <span>{{mag}}</span>
    </div>
</body>
<script src="../../Vue/vue.js"></script>
<script>
  new vue({
    el:'#app',
    data:{
        msg:'111'
    }
  })

.number

自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值

    <div id="app">
        <!-- 修饰符. -->
        <input type="number" v-model.number="age">
        <span>{{age}}</span>
    </div>

<script src="../../Vue/vue.js"></script>
<script>
  new vue({
    el:'#app',
    data:{
        age:''
    },
    watch:{
        age(){
            console.log(typeof(this.age));
        }
    }
  })

.trim

修饰符 .trim 可以自动过滤输入的首尾空格。

    <div id="app">
        <!-- .trim 屏蔽空格 -->
        <input  type="text" v-model.trim="msg">
        <span>一个{{msg.length}}个字符</span>
    </div>
</body>
<script src="../../Vue/vue.js"></script>
<script>
  new vue({
    el:'#app',
    data:{
        msg:''
    }
  })

表单包含了什么？

1） 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
2） 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
3） 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

表单组件：

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

    <!-- type="text"(类型=文本)文本输入框，用于登录页面输入用户名 -->
    文本输入：<input type="text"><br>

    <!--type="password"(类型=密码）密码输入框，用于输入密码，显示***。--> 
    输入密码：<input type="password"> <br> 
    
    <!-- type="file"(类型=文件）上传文件处，用于文件的选择和上传。--> 
    选择文件：<input type="file"> <br> 
    
    <!--type="checkbox"(类型=复选框）用于某项选择的打开或关闭。-->
     反复选择：<input type="checkbox"><br>
     
    <!-- type="radio"(类型=发送）只能选择一次--> 
    唯一选择：<input type="radio"> <br>
    
    <!--type="image"(类型=图片）将图片定义为提交按钮-->
     图片提交：<input type="image"src="图片路径"> <br> 
     
    <!--type="submit"(类型=提交）专门用于提交表单的button按钮-->
     提交按钮：<input type="submit"> <br>
     
    <!--type="month"(类型=月份）定义year(年）和month(月）-->
     选择月份：<input type="month"> <br> 
     
     <!--type="number"(类型=数字）只能选择/输入数字-->
      选择数字：<input type="number"> <br>
      
      <!-- type="time" (类型=时间） 定义分秒--> 
      选择时间：<input type="time"> <br> 
      
      <!-- type="week"(类型=周）定义年月周--> 
      选择周：<input type="week">

实例：