Vue.js if else in view

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.

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?