首页 > Web开发 > 详细

[Vue] Conditionally Render DOM Elements in Vue.js (v-if v-else v-show)

时间:2017-01-24 17:38:06      阅读:893      评论:0      收藏:0      [点我收藏+]

You can use v-if and v-else to display content based on assertions on your data. Similarly, v-show can be used to render the content, but hide it with css. v-if can also be used on an invisible wrapper <template>element.

 

v-if v-else:

It is good that when you use ‘v-if‘ you wrap the html into ‘<template>‘:

            <template v-if="counter > 5">
                <div>Show if the counter is greater than five</div>
            </template>

 

‘v-else‘: will be rendered if the closeset ‘v-if‘ doesn‘t render:

            <template v-if="counter > 5">
                <div>Show if the counter is greater than five</div>
            </template>
            <div v-else>Show the counter is smaller than five</div>

 

v-show:

            <button @click="dec" v-show="counter > 0">-</button>
            <button @click="inc" v-show="counter < 5">+</button>

 

[Vue] Conditionally Render DOM Elements in Vue.js (v-if v-else v-show)

原文:http://www.cnblogs.com/Answer1215/p/6347318.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!