Conditionals in Pug can evaluate statements in a manner similar to JavaScript. You can evaluate variables created in Pug, or those passed to it by your route (res.render, pug.renderFile, etc).
index.js
var authorized = true
res.render("index", {
authorized: authorized
});
index.pug
- var showLogin = false;
if authorized && showLogin === true
.welcome Welcome back to our website!
else
.login
a(href="/login") Login
index.pug output
<div class="login"><a href="/login">Login</a></div>
You can choose to prepend an if or else operator with a dash, but it is not necessary. You will need to wrap the statement in parentheses, though (if you omit a dash, you do not need parentheses.)
- var showLogin = false;
- if (showLogin === true)
.welcome Welcome back to our website!
- else
.login
a(href="/login") Login
index.pug output
<div class="login"><a href="/login">Login</a></div>
You can chain any number of else if statements to an existing if statement, to evaluate a sequence of statements.
index.pug
- var page = 60;
if page => 52
h1 Lots of numbers!
else if page > 26 && page < 52
h1 A few numbers
else
h1 Not a lot of numbers
index.pug output
<h1>Lots of numbers!</h1>
unless is the inverse operation of if in Pug. It is analogous to if !(statement).
index.pug
- var likesCookies = true;
unless likesCookies === true
h2 You don't like cookies :(
else
h2 You like cookies!
index.pug output
<h1>You like cookies!</h1>
Note: else unless statements do not work with unless; you can chain an else if statement to an unless statement, but else unless does not work.
if (statement)
// Pug code
else if (statement)
// Pug code
else
// Pug code
unless (statement)
// Pug code
| Parameter | Details |
|---|---|
| if (statement) | Evaluates statement to see if it returns true or false. The code nested underneath if will run only if statement returns true. |
| else if (statement) | Chained to an existing if or else if statement; it only runs if the previous statement evaluated to false. The code nested underneath the else if statement will run only if statement evaluates to true. |
| else | The code nested underneath the else statement will run only if all previous statements returned false. |
| unless (statement) | The negation of if (statement); the code nested underneath if will run only if statement returns false. It is the same as if (!statement). |