表单修饰符 · vue

# 表单修饰符表单修饰符一共有三个，分别是 .lazy .number .trim ## .lazy修饰符是将input输入框的数据绑定 v-model从实时监听的状态变为change状态(也就是失焦后更新数据) ~~~ <input type="text" v-model.lazy='a'> ~~~ ## .number修饰符会将非数字内容进行过滤，得到的都是纯数字类型，是可以进行计算的费NaN数字 ## 如果没有使用 .number修饰符，得到的输入框的数字都是string类型 ## .trim 修饰符的作用是过滤用户输入的首位空格 # 修饰符可以点语法连着使用 ~~~ <input type="text" v-model.lazy.trim='a'> ~~~ # 代码案例： ~~~ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model.lazy.trim='a'> <p>{{a}}</p> </div> </body> </html> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue=new Vue({ el:'#app', data:{ a:100 } }) </script> ~~~