Vue官網看到的（https://cn.vuejs.org/v2/guide/conditional.html）

v-if?vs?v-show

v-if?是“真正的”條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。

v-if?也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。

相比之下，v-show?就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。

一般來說，v-if?有更高的切換開銷，而?v-show?有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用?v-show?較好；如果在運行時條件不太可能改變，則使用?v-if?較好。

當?v-if?與?v-for?一起使用時，v-for?具有比?v-if?更高的優先級。

事件修飾符

<!-- 阻止單擊事件繼續傳播 -->
<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>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>

使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用?v-on:click.prevent.self?會阻止所有的點擊，而?v-on:click.self.prevent?只會阻止對元素自身的點擊。

如果想自動將用戶的輸入值轉為數值類型，可以給?v-model?添加?number?修飾符：

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

這通常很有用，因為即使在?type="number"?時，HTML 輸入元素的值也總會返回字符串。

?

如果要自動過濾用戶輸入的首尾空白字符，可以給?v-model?添加?trim?修飾符：

<input v-model.trim="msg">

　　

轉載于:https://www.cnblogs.com/fxk327/p/9002537.html

總結

以上是生活随笔為你收集整理的Vue 中的 v-if 和 v-show 修饰符的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。