條件語句
v-if/v-else
| <!-- 格式v-if="true/false" v-else --> <div style="height: 100px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v1.v-else指令示例</div> <hr /> <div> <div style="font-size: 25px;" v-if="isVisible"> {{message0}} </div> <div style="font-size: 25px;" v-else> {{message1}} </div> </div> </div> |
v-else-if
| <!-- 格式v-if="true/false" v-else-if="true/false" ... --> <div style="height: 100px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v2.v-else-if指令示例</div> <hr /> <div> <div style="font-size: 25px;" v-if="count > 10"> {{message0}} </div> <div style="font-size: 25px;" v-else-if="count > 5"> {{message1}} </div> <div style="font-size: 25px;" v-else-if="count > 0"> {{message2}} </div> </div> </div> |
VUE指令v-if條件渲染
包括3種指令用法：v-if=(true/false)/v-else/v-else-if=(true/false)
v-show用法與v-if類似
v-show 指令
v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。
v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。
相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。
//TODO
Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。這么做除了使 Vue 變得非常快之外，還有其它一些好處。例如，如果你允許用戶在不同的登錄方式之間切換。
<!DOCTYPE html> <html style="height: 100%;"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../lib/vue.v2.5.12.js" ></script> <title>HelloDemo</title> </head> <body style="height: 100%;"> <style> </style> <!-- VUE指令v-if條件渲染 包括3種指令用法：v-if=(true/false)/v-else/v-else-if=(true/false) v-show用法與v-if類似 REF: http://www.runoob.com/vue2/vue-if.html https://cn.vuejs.org/v2/guide/conditional.html --> <div id="appVue"> <!-- --> <!-- 格式v-if="true/false" v-else-if="true/false" ... --> <div style="height: 100px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v2.v-else-if指令示例</div> <hr /> <div> <div style="font-size: 25px;" v-if="count > 10"> {{message0}} </div> <div style="font-size: 25px;" v-else-if="count > 5"> {{message1}} </div> <div style="font-size: 25px;" v-else-if="count > 0"> {{message2}} </div> </div> </div> <!-- 格式v-if="true/false" v-else --> <div style="height: 100px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v1.v-else指令示例</div> <hr /> <div> <div style="font-size: 25px;" v-if="isVisible"> {{message0}} </div> <div style="font-size: 25px;" v-else> {{message1}} </div> </div> </div> <!-- 格式v-if="true/false" --> <div style="height: 100px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-if指令示例</div> <hr /> <div> <div style="font-size: 25px;" v-if="isVisible"> {{message0}} </div> </div> </div> <!-- 格式v-show="true/false" --> <div style="height: 100px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> show.v-show指令示例</div> <hr /> <div> <div style="font-size: 25px;" v-show="isVisible"> {{message0}} </div> </div> </div> </div> <script> new Vue({ el: "#appVue", data: { message0: "AAA", message1: "BBB", message2: "CCC", count: 10, isVisible: true } } ) </script> </body> </html>
REF:
http://www.runoob.com/vue2/vue-if.html
https://cn.vuejs.org/v2/guide/conditional.html