v-model指令有三個可以選用的修飾符:.lazy、.number以及.trim。vue官方對此的描述為:
- .number-輸入字符串轉為有效的數字
- .lazy-取代input監聽change事件
- .trim-輸入首尾空格過濾
官方鏈接:https://cn.vuejs.org/v2/api/#v-model
這三個修飾符的使用實例:(可嘗試復制運行但需要正確的vue路徑)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="div1"> <!-- lazy修飾符 點擊回車或者失去焦點時才發生數據響應 --> <input type="text" v-model.lazy="message"> <h2>{{message}}</h2> <!-- number修飾符 將輸入的內容直接作為number類型使用--> <input type="number" v-model.number="age"> <h2>{{age}} {{typeof age}}</h2> <!-- trim修飾符 去除左右兩邊的空格 --> <input type="text" v-model.trim="trim"> <h2>{{trim}}</h2> </div> <script src="vue.js"></script> <script> const app = new Vue({ el:'#div1', data:{ message:'修飾符', age:20, trim:'' }, methods:{ } }) </script> </body> </html>