The use of the v-show
directive is almost identical to that of v-if
. The only differences are that v-show
does not support the <template>
syntax, and there is no "alternative" condition.
var vm = new Vue({
el: '#example',
data: {
a: true
}
});
The basic use is as follows...
<!-- will render 'Condition met' -->
<div id="example">
<h1 v-show="a">Condition met</h1>
</div>
While v-show
does not support the v-else
directive to define "alternative" conditions, this can be accomplished by negating the previous one...
<!-- will render 'This is shown' -->
<div id="example">
<h1 v-show="!a">This is hidden</h1>
<h1 v-show="a">This is shown</h1>
</div>