<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控件处理之表单修饰符:lazy/number/trim</title> <script src="vue.js"></script> </head> <body> <div id="lantian"> <!--lazy(懒惰的) : 使用lazy修饰符之后,当文本框失去焦点之后,才会更新同input绑定同样数据的数据。 --> lazy修饰符测试:<br> <input type="text" v-model.lazy="lazydata"><br> {{lazydata}}<br> <!--number: 强制使得输入的数据的字符类型变成number型 --> number修饰符测试:<br> <input type="number" v-model.number="numberData"><br> <!--trim: 输入的空格,不调用事件方法 --> trim修饰符测试:<br> <input type="text" v-model.number.trim="trimData"><br> </div> <script> var app = new Vue({ el: '#lantian', watch:{ numberData:function (newData,oldData) { console.log(typeof (newData));//输出:number }, trimData:function (newData,oldData) { console.log(newData.length); } }, data: { lazydata:'lazy中的默认数据', numberData:"number修饰符测试使用的数据", trimData:"trimData" } }); </script> </body> </html>