目錄

1.v-if

2.v-else

?3.v-else-if

4.v-show

5.v-if 和 v-show 比較

---

1.v-if

作用：條件性的渲染一塊內容，這塊內容只會在指令的表達式為真值時被渲染。

<div id="app"><div v-if=true>姓名：{{ stu1.name }}</div> //渲染<div v-if=false>年齡：{{ stu1.age }}</div> //不渲染<div>姓名：{{ stu2.name }}</div><div>年齡：{{ stu1.age }}</div> </div> const vm = new Vue({el: '#app',data: {stu1: {name: "JWH",age: 18},stu2: {name: "DQS",age: 18}} })

【結果】stu1.age不渲染

【注】若想切換多個元素，則可以將其包裹在不可見元素 <template> 中，并在 <template> 元素上使用 v-if ，如下例：

<template v-if=true><div>姓名：{{ stu1.name }}</div><div>年齡：{{ stu1.age }}</div> </template> <template v-if=false><div>姓名：{{ stu2.name }}</div><div>年齡：{{ stu2.age }}</div> </template>

【結果】

2.v-else

作用：為 v-if 或者 v-esle-if 添加 else 塊，其前一兄弟元素必須有 v-if 或 v-else-if，舉個例子

<template v-if=false><div>姓名：{{ stu1.name }}</div><div>年齡：{{ stu1.age }}</div> </template> <template v-else><div>姓名：{{ stu2.name }}</div><div>年齡：{{ stu2.age }}</div> </template>

【結果】

?3.v-else-if

作用：為 v-if 添加 else if 塊，可以鏈式調用，前一兄弟元素必須有 v-if 或 v-else-if

<div id="app"><div v-if="chose.A">{{ stu1.name }}</div><div v-else-if="chose.B">{{ stu2.name }}</div><div v-else="choseC.">{{ stu2.age }}</div> </div> const vm = new Vue({el: '#app',data: {stu1: {name: "JWH",age: 18},stu2: {name: "DQS",age: 18},chose:{A:false,B:true,C:true}} })

?【結果】

4.v-show

作用：根據表達式之真價值，切換元素的 display CSS 屬性，舉個栗子

<div v-show=2>你就是最好的</div> <div v-show=0>You are the best</div>

【結果】可以看到第二行代碼的 display 屬性值為 none

5.v-if 和 v-show 比較

v-if 是惰性的，如果在初始渲染時條件為假，則什么也不做，直到條件第一次變為真時才會開始渲染條件塊；v-show 則不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于CSS進行切換

v-if 有更高的切換開銷，v-show 有更高的初始渲染開銷，如果需要非常頻繁地切換，則使用 v-show 較好，如果運行時條件很少改變，則使用 v-if 較好

v-show 不支持<template> 元素

v-show 不支持 v-else / v-else-if

總結

以上是生活随笔為你收集整理的Vue指令篇_v-if、v-else、v-else-if的全部內容，希望文章能夠幫你解決所遇到的問題。

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