在 第十一篇 事件处理当中讲到了事件修饰符，有 .stop，.prevent，.once，.self 等修饰修饰，以往阻止事件的冒泡，通过stopPropagation来阻止事件的传播，那么使用事件修饰符.stop能够阻止事件的冒泡，那么在表单中有哪些的表单控件修饰符，能够带来哪些的简便。下面通过简单的例子来让你更快的吸收。

案例：在之前的文章内容讲过在input框中获取数据，需要做一个数据的监听来获取input框中的数据，那么在Vue中，通过v-model指令实现数据的双向绑定，可以拿到input框的数据，而且是时时更新，那么这样会有什么样的问题呢？

<div id="app">
    <textarea name="" id="" cols="29" rows="9">  点击 "提交" 的时候将下面input框中的数据打印到控制台上;输入的数据是时时更新的;
    </textarea>
    <input type="text" v-model="mytext"/>
    <input type="submit" @click="handleLogin" />
    <p>输入显示：{{mytext}}</p> 
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            mytext:''
        },
        methods:{
            handleLogin(){
                console.log('mytext：' + this.mytext)
            }
        }
    })
</script>

.lazy

效果：点击 input 输入框获取焦点输入，离开焦点的时候来获取里面的值；

        只需要加这样的一个修饰符 " .lazy "  ，进行一个 " 懒处理 "，默认情况，用 v-model 指令与input框绑定，则 v-model 会在每次input事件触发后将输入框的值与数据进行同步，添加 .lazy，数据的同步会转为change事件之后进行处理；文字描述可能不是比较清晰，通过图文代码的方式来辅助理解；

修改：

<input type="text" v-model.lazy="mytext"/>

 以上就是 lazy 修饰符的使用，接下来讲的是 number 的修饰符；

.number

        在表单中填写数字，我们获取的是字符串的数字，那么输入的数字我们希望它是以数字的形式而不是以字符串的形式；number修饰符通常很有用的，即使在 type="number" 时，HTML 输入元素的值也总会返回字符串；

<input type="number" v-model="mytext"/>
<input type="number" v-model.number="mytext"/>
<input type="submit" @click="handleSubmit"/>

 .trim

这个修饰符可能大家比较熟悉一些，比如在做密码时前后清除空格的操作，这个trim的修饰也是用来去掉首尾空格的操作；

<input type="password" v-model="mypassword1" >
<input type="password" v-model.trim="mypassword2" >

        以上讲的这篇内容时关于表单控件修饰符的内容，如果有不清楚的，大家也可以看 Vue的一个官方文档，附上地址：表单输入绑定 — Vue.js ；