Vue官網(wǎng)看到的（https://cn.vuejs.org/v2/guide/conditional.html）

v-if?vs?v-show

v-if?是“真正的”條件渲染，因?yàn)樗鼤?huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N毀和重建。

v-if?也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開(kāi)始渲染條件塊。

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

一般來(lái)說(shuō)，v-if?有更高的切換開(kāi)銷，而?v-show?有更高的初始渲染開(kāi)銷。因此，如果需要非常頻繁地切換，則使用?v-show?較好；如果在運(yùn)行時(shí)條件不太可能改變，則使用?v-if?較好。

當(dāng)?v-if?與?v-for?一起使用時(shí)，v-for?具有比?v-if?更高的優(yōu)先級(jí)。

事件修飾符

<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監(jiān)聽(tīng)器時(shí)使用事件捕獲模式 -->
<!-- 即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進(jìn)行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>

使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用?v-on:click.prevent.self?會(huì)阻止所有的點(diǎn)擊，而?v-on:click.self.prevent?只會(huì)阻止對(duì)元素自身的點(diǎn)擊。

如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型，可以給?v-model?添加?number?修飾符：

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

這通常很有用，因?yàn)榧词乖?type="number"?時(shí)，HTML 輸入元素的值也總會(huì)返回字符串。

?

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

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

　　

轉(zhuǎn)載于:https://www.cnblogs.com/fxk327/p/9002537.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。