CODEWITHSUNDEEP
if-statementviewvue.js
Chris
Chris

Reputation: 8988

Vue.js if else in view

Is it possible to have an if / else statement which does not render any html in a view similar to knockout:

<!-- ko if: someExpressionGoesHere -->

Upvotes: 11

Views: 43938

Answers (3)

Parth Parekh
Parth Parekh

Reputation: 156

you can also use this way to write if else condition in vue.js

<template>
  <div id="app">
    <p v-if="someConditionHere">Condition True</p>
    <p v-else>Condition False</p>
  </div>
</template>

Upvotes: 3

Grandizer
Grandizer

Reputation: 3025

I know the question was already answered, but thought I would pass along something I use, now that I am writing sites with Vue (which I love.) I am a fan of Knockout and have many sites written in it using the:

<!-- ko if: someExpressionGoesHere -->

You could do a similar thing in Vue like this:

<template v-if="someExpressionGoesHere">
  <p>Expression is True</p>
</template>
<template v-else>
  <p>Expression is False</p>
</template>

The templates will not render anything to the page. The resulting html will be a single p of the 'Expression is xxx'.

I think it is a bit more clear of what the intent of the code is here than the actual answer to this post IMHO.

Upvotes: 9

koba04
koba04

Reputation: 981

but it needs to be on an element

Yes, but if v-if conditional is false, it's not added to DOM tree.

HTML

<div id="main"></div>

JavaScript

new Vue({
    el: "#main",
    template: '<div v-if="name"><span v-text="name"></span></div>',
    data: {
//        name: "bob"
    } 
});

console.log(document.body.innerHTML);
// <div id="main"><!--vue-if--></div>

Still not good for you?

Upvotes: 12

Related Questions