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

Posted 2023-02-23

【中文标题】如何在 vue.js 2 上使用 if in if？

【英文标题】：How can I use if in if on vue.js 2?

【发布时间】：2017-09-09 02:03:39

【问题描述】：

如果在视图刀片中，它是这样的：

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

我想把它改成 vue 组件

我尝试这样：

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

好像错了

我怎样才能正确地做到这一点？

【问题讨论】：

为什么你有两个v-ifs？ v-if="a && !b" 应该够了。

@Amresh Venugopal，太好了。非常感谢

【参考方案1】：

您有多种选择，要么按照@Amresh Venupogal 的描述链接条件，要么像在刀片视图中那样进行嵌套。但是，它需要您添加一个额外的 html 元素。

选项 A

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

选项 B（显然更糟，因为您将在无序列表中创建空 div）

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