# [Vue.js] 修飾符

###### tags: `Vue.js`


#### 事件修飾符
常用：v-on:click只需在後方新增prevent語法(防止此事件啟動)
a href="#"意指網頁連結，新增prevent防止頁面上移或跳轉(當無指定網址)

#### 按鍵修飾符
1. v-on ==@
原寫法：`v-on:click="函數"`
修飾寫法：`@click="函數"`

* v-on:keyup.enter="函式A" =>按下enter鍵啟動函式內容

2. v-blid ==:
原寫法：`v-blid:href="link"`
修飾寫法：`:href="link"`

#### Modifiers 修飾符

[參考資料（搜尋lazy）](https://cythilya.github.io/2017/04/14/vue-data-v-model/)

.lazy原本雙向綁定的更新方式是以 input 事件監聽，亦即資料變動即更新，但使用.lazy會改用 change 事件監聽，event trigger 才更新。

更改 input 內的值並不會馬上變更 model 的資料，而是等到滑鼠移到輸入框外，觸發 change 事件才更新。

#### number修飾符

將字串轉為數字，在後方加入number即可將輸入的字串轉為數字

<input type ="number" class="form-control" v-model.number="age">

#### trim緊貼的文字

當輸入文字夾雜著空格時，使用trim便可以刪去空格，文字便可以相連

<input type ="text" class="form-control" v-model.trim="age">