Complete Vue.js 3 Guide [3/10]

In this lesson, we will talk about conditional rendering. Vue offers us four directives for this job: v show, v if, v else, and v else if.

The last three directives work together. V show works alone. It does not work with v else. Do remember this.

Conditional rendering, just like what its name has suggested, means rendering elements based on a condition.

We have two P tags here. The first one says have your cake and the second one says eat your cake. Obviously, we cannot have our cake and eat it. So only one P tag can be displayed at a time.

In the first P tag, we add the v show directive. No directive argument is needed. We set the directive value to true.

Let’s run the file.

Both P tags are in normal display.