VUE指令条件渲染v-if
条件语句
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
