Reputation: 8988
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
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
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 template
s 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
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