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

Posted 2020-08-29 Answer1215

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>