v-model.trim


v-model的修飾符
v-model.lazy 只有在input輸入框發生一個blur時才觸發
v-model.trim 將用戶輸入的前后的空格去掉
v-model.number 將用戶輸入的字符串轉換成number
在input textarea select中使用

 

 

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在 methods 中輕松實現這點,但更好的方式是:methods 只有純粹的數據邏輯,而不是去處理 DOM 事件細節。

為了解決這個問題, Vue.js 為 v-on 提供了 事件修飾符。通過由點(.)表示的指令后綴來調用修飾符。

.stop
.prevent
.capture
.self
.once
<!-- 阻止單擊事件冒泡 -->

<a v-on:click.stop="doThis"></a>

 

<!-- 提交事件不再重載頁面 -->

<form v-on:submit.prevent="onSubmit"></form>

 

<!-- 修飾符可以串聯 -->

<a v-on:click.stop.prevent="doThat"></a>

 

<!-- 只有修飾符 -->

<form v-on:submit.prevent></form>

 

<!-- 添加事件偵聽器時使用事件捕獲模式 -->

<div v-on:click.capture="doThis">...</div>

 

<!-- 只當事件在該元素本身(比如不是子元素)觸發時觸發回調 -->

<div v-on:click.self="doThat">...</div>

使用修飾符時,順序很重要;相應的代碼會以同樣的順序產生。因此,用 @click.prevent.self 會阻止所有的點擊,而 @click.self.prevent 只會阻止元素上的點擊。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM