條件語句
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-show
v-if
v-show
v-if
是“真正”的條件渲染，因為它會確定在切換過程中條件塊内的事件監聽器和子元件适當地被銷毀和重建。
v-if
也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。
相比之下，
v-show
就簡單得多——不管初始條件是什麼，元素總是會被渲染，并且隻是簡單地基于 CSS 進行切換。
一般來說，
v-if
有更高的切換開銷，而
v-show
有更高的初始渲染開銷。是以，如果需要非常頻繁地切換，則使用
v-show
較好；如果在運作時條件很少改變，則使用
v-if
較好。
//TODO
用 key 管理可複用的元素
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
![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)