如何在vue.js 2上的if中使用if？

Question

If in view blade, it's like this :

<ul>
@if ($a)
    @if (!$b)
        <li>
            <p>...</p>
            ...
        </li>
    @endif
@endif
...
</ul>

I want change it to be vue component

I try like this :

<ul>
<li v-if="a" v-if="!b">
    <p>...</p>
    ...
</li>
...
</ul>

Seems it's wrong

How can I do it correctly?

Answer 1

You have multiple options either you chain the condition as described by @Amresh Venupogal or you make a nested if just like you did in your bladeview. However it would require you to add an additional html element.

Option A

<ul> 
  <li v-if="a && !b"><p>...</p></li>
</ul>

Option B (obviously worse since you will create empty div's inside your unorderd list)

<ul> 
  <div v-if="a">
     <li v-if="!b"><p>...</p></li>
  </div>
</ul>