修飾符

創建 04-修飾符.html

修飾符 (Modifiers) 是以半角句號（.）指明的特殊后綴，用于指出一個指令應該以特殊方式綁定。

例如，.prevent 修飾符告訴 v-on 指令對于觸發的事件調用 event.preventDefault()：

即阻止事件原本的默認行為

data: {user: {} } <!-- 修飾符用于指出一個指令應該以特殊方式綁定。這里的 .prevent 修飾符告訴 v-on 指令對于觸發的事件調用js的 event.preventDefault()：即阻止表單提交的默認行為 --> <form action="save" v-on:submit.prevent="onSubmit"><label for="username"><input type="text" id="username" v-model="user.username"><button type="submit">保存</button></label> </form> methods: {onSubmit() {if (this.user.username) {console.log('提交表單')} else {alert('請輸入用戶名')}} }

條件渲染

創建 05-條件渲染.html

v-if：條件指令

data: {ok: false }

注意：單個復選框綁定到布爾值

<input type="checkbox" v-model="ok">同意許可協議 <!-- v:if條件指令：還有v-else、v-else-if 切換開銷大 --> <h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1> <h1 v-else>no</h1>

v-show：條件指令

使用v-show完成和上面相同的功能

<!-- v:show 條件指令 初始渲染開銷大 --> <h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1> <h1 v-show="!ok">no</h1>

• v-if?是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
• v-if?也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。
• 相比之下，v-show?就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。
• 一般來說，v-if?有更高的切換開銷，而?v-show?有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用?v-show?較好；如果在運行時條件很少改變，則使用?v-if?較好。

?

總結

以上是生活随笔為你收集整理的vue修饰符和条件指令的全部內容，希望文章能夠幫你解決所遇到的問題。

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