Published: Modified: V1.18
vuejs

vue if conditional directive and other options

The vue if or v-if directive in vuejs can be used when making templates to make an element display or not based on a given condition. It can come in handy when working out a template that contains elements that do not need to be displayed all the time, or only under certain conditions such as a menu system of some kind. However there are other options as well when it comes to built in directives that provide this kind of function such as v-show directive, and there are other related directives to v-if such as v-else, and v-else-if.

Also there is yet another option to considered when starting to use lots of directives with a static template, there is the idea of dropping templates all together in favor of render methods. When it comes to using render methods an actual javaScript if statement can be used as a way to define a condition to display and element or not, and render methods are generally more powered in general actually because javaScript can be used in a full unchained kind of way. Never the less this will be a quick post on the vue if directive, and some alternative options, and examples that related to the use of vue-if when working on a project that makes use of vuejs as a client side framework.

1 - Some Vue v-if basic examples

So when working out a template the vue if directive can be used to define a condition that if true will result in the rendering of the element that it is used with, otherwise of false it will not render. The value that is used with the directive can be an expression, a data object property, or some kind of combination of the two. In this section I will just be going over a few quick basic examples of this v-if directive as well as a few closely related directives such as the v-else directive.

1.1 - A Basic example of v-if.

For a first basic example as to how the v-if directive can be useful say I have an array of values and I only want to render a some html for each element that fits a given condition. This array contains numbers and other values that by themselves may not evaluate to a true boolean value. I can use the v-for directive as a way to render html for each element in the array, and I can use the v-if directive to actually render some html if it meets a condition. When using the v-if directive I can use the value itself as a way to render something or not, and I can also use expressions that will evaluate to a true or false value as a way to find out if I want to render for the given element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
  <head>
    <title>vue if example</title>
    <script src="/js/vuejs/2.6.10/vue.js"></script>
  </head>
  <body>
  <div id="demo-if"></div>
  <script>
new Vue({
    el: '#demo-if',
    template: '<div>' +
        '<div v-for="a in arr" style="margin-bottom:20px;">' +
            // it can just be the value itself that will convert to a true or false value
            '<div v-if="a"> value is true: {{ a }}  <br></div>' +
            // it can be an expression that will evaluate to true or value
            '<div v-if=" typeof a === \'number\' ">is a number: {{ a.toFixed(2) }}<br></div>' +
        '</div>' +
    '</div>',
    data: {
        arr: [false, 2, 3, null, 6.5, 8, 'foo']
    }
});
  </script>
  </body>
</html>

This might not be the best example when it comes to real life use case examples, but basic examples are often like that. In any case the basic idea is there. I have a value in the data object that will convert to a true or false value, or can be used in a simple expression that will evaluate to a true or false boolean value. If the value is false then the html element, and any children it it, should not render. If the resulting boolean value is true then the html for that value will render, and that is about it. However maybe it is called for to look at least a few more examples of the v-if directive, and other directives to get a better feel for how to go about using this in a real project of some kind.

1.2 - v-if and v-else

When using an if statement in javaScript, or any language for that matter there is often an else statement that can be used with an if statement. That is there is a way to define some code that will fire when a condition evaluates to false, and only false. So it stands to reason that there should be a kind of v-else directive on top of the v-if directive, and there is.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
  <head>
    <title>vue if example</title>
    <script src="/js/vuejs/2.6.10/vue.js"></script>
  </head>
  <body>
  <div id="demo-if"></div>
  <script>
new Vue({
    el: '#demo-if',
    template: '<div>' +
        '<div v-for="a in arr">' +
            '<p v-if=" typeof a === \'number\' ">{{ a.toFixed(2) }}</p>' +
            '<p v-else>{{ String(a) }}</p>' +
        '</div>' +
    '</div>',
    data: {
        arr: ['foo', 3.14159, NaN]
    }
});
  </script>
  </body>
</html>

2 - Render methods as a vue if alternative

One alternative to the vue if directive is to get into using render methods in place of static templates. Within the body of a render method the full power of javaScript can be used including if statements and ternary operators.

1
2
3
4
5
6
7
8
9
new Vue({
    el: '#demo-if',
    render: function (createElement) {
        return createElement('div',[createElement('p', typeof this.n === 'number' ? this.n.toFixed(2) : this.n)])
    },
    data: {
        n: Math.PI
    }
});

Directives like vue if can still be used in render methods as well, but why bother when you can just do anything that works with javaScript when dealing with a render method.

3 - Conclusion

The v-if directive is then a good way to go about quickly flagging an element as being currently visible or not. So far I often use it when making a template where there might be a number of divisions that act as part of an interface, but I only need to have one part of that interface visible at a time.