表單修飾符 · 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> ~~~