Vue.js Conditional Statements |

-- Learning is not just about technology, but also about dreams!

Vue.js Tutorial

Vue.js Template Syntax

Vue.js Loop Statements

Vue.js Conditional Statements

Conditional Judgment

v-if

Conditional judgment uses the v-if directive:

v-if Directive

Use the v-if directive in elements and templates:

Now you see me

Learning is not just about technology, but also about dreams!

Haha, typing is hard work!!!

new Vue({ el: '#app', data: { seen: true, ok: true } })

Try it yourself »

Here, the v-if directive will decide whether to insert the <p> element based on the value of the expression seen (true or false).

In string templates, such as Handlebars, we would write a conditional block like this:

<!-- Handlebars template -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

v-else

You can use the v-else directive to add an "else" block to v-if:

v-else Directive

Generate a random number, check if it's greater than 0.5, then output the corresponding message:

0.5"> Sorry

Not sorry

new Vue({ el: '#app' })

Try it yourself »

v-else-if

v-else-if was added in 2.1.0. As the name suggests, it serves as an "else-if block" for v-if. It can be used multiple times in a chain:

v-else-if Directive

Check the value of the type variable:

Not A/B/C

new Vue({ el: '#app', data: { type: 'C' } })

Try it yourself »

v-else and v-else-if must immediately follow a v-if or a v-else-if.

v-show

We can also use the v-show directive to conditionally display elements:

v-show Directive

<h1 v-show="ok">Hello!</h1>

Try it yourself »

YouTip

Vue If

Vue.js Conditional Statements |

-- Learning is not just about technology, but also about dreams!

Vue.js Tutorial

Vue.js Conditional Statements

Conditional Judgment

v-if

v-if Directive

v-else

v-else Directive

v-else-if

v-else-if Directive

v-show

v-show Directive

📂 Categories