I try this code:
<h1 v-if="2 === 1">Yes</h1>
<h1 v-else>No</h1>
but not work and show both of them tags <h1>
How to use v-if and v-else on vue.js?
If you don't need to remove the element from the DOM and the condition is simply to toggle some text - you could just use a ternary operator. See below
<h1 v-text="2 === 1 ? 'Yes' : 'No'" />
Related
I have a simple div with class like:
<template>
<div class="grid grid-cols-2">
</div>
</template>
But I want to remove a grid-cols-2 if a condition is true, so I try:
<div :style="!results.contactCompany ? 'grid grid-cols-2' : 'grid'">
But it does not work. What am I doing wrong?
You cannot apply class using :style. instead use v-bind:class
<div v-bind:class = "!results.contactCompany ? 'grid grid-cols-2':'grid'">
How do i get v-hide to work. Below is my example.
All I'm trying to achieve is i want the above to hide if value.photo is empty.
<div v-for='value in listPlayers'>
<img v-hide='value.photo.length > 0' src='/wp-content/uploads/2018/10/dummy-copy.gif'>
</div>
You should use v-if or v-show directives and use the negation of your condition :
v-if='!(value.photo.length > 0)'
If you don't want to render the element it is better that you use v-if like this:
<div v-for='value in listPlayers'>
<img v-if='!value.photo.length' src='/wp-content/uploads/2018/10/dummy-copy.gif'>
</div>
You can use v-show also, but with v-show the content will be rendered but not displayed.
List item
<ul>
<li>language</li>
< v-if= "tree()"> //which tag I may use or any other process
<li>home</li>
<li>about</li>
<>
< v-else> //which tag I may use or any other process
<li>accounts</li>
<li>listing</li>
<>
</ul>'
In the V-if which html tag i may use or any other vue.js process to work with this.
You can use template:
<template v-if="condition">
</template>
<template v-else>
</template>
Template will not be rendered in the browser. But it will parse the contents inside of this to the html.
you can sometimes use the <slot> element to make what you want. Have a look at the slot documentation here
I have the following HTML:
<div v-html="parse(message.message)">
<i v-if="message.messageTypeId === 2" class="SpecialIcon"></i>
</div>
For some reason the element <i v-if="message.messageTypeId === 2"></i> is not being added into the DOM because what I think is that when v-html is evaluated the innerHTML is being replaced.
Any clue on how to make that work?
Thanks
Try using curly braces to embed your generated message in place, rather than relying on the v-html property.
<div>{{parse(message.message)}}
<i v-if="message.messageTypeId === 2" class="SpecialIcon"></i>
</div>
List item
<ul>
<li>language</li>
< v-if= "tree()"> //which tag I may use or any other process
<li>home</li>
<li>about</li>
<>
< v-else> //which tag I may use or any other process
<li>accounts</li>
<li>listing</li>
<>
</ul>'
In the V-if which html tag i may use or any other vue.js process to work with this.
You can use template:
<template v-if="condition">
</template>
<template v-else>
</template>
Template will not be rendered in the browser. But it will parse the contents inside of this to the html.
you can sometimes use the <slot> element to make what you want. Have a look at the slot documentation here