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 or a data object property.
In this quick example if the type of a data object property is a number it will be fixed to two decimal points, else if it is a string then the full value of the number will be displayed. One element or another will be rendered, but not both depending on the type of the property.
So for this example I have a basic.js file that looks like this.
And html that makes use of it that looks like this.
So then because the type of the data.n property is a number, the value of PI is fixed to two decimal points. A silly example but you get the idea, this directive can be used to set some conditions for the tendering of elements, and any children within them.
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 jvaScript when dealing with a render method.