如何在 VueJS 的 v-if 中使用多个条件？

Question

这是我的代码：

JavaScript

 let Names = [
    {
        Name: "Josh"
        FullName: ""
    },
    {
        Name: "Jonathan"
        FullName: null
    },
    {
        Name: "James"
        FullName: "James Johnson"
    }
];

索引.Vue

 <ul>
    <li
        v-for="item in Names"
        v-if=" item.FullName != null || item.FullName != '' "
    >
     {{FullName}}
    </li>
</ul>

这 v-if=" item.FullName != null || item.FullName != '' " 不起作用，为什么？如何在 v-if 中放置两个条件？

原文由 Johnson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

也许这是您将空字符串视为错误值的方式，而 || 是说：如果两个（左/右）表达式中的任何一个为真，则显示全名，这不是您想要的我的想法。

试试这个：

  <li v-for="item in Names" v-if="item.FullName !== null && item.FullName !== ''">

另外，从您的代码来看， {{ FullName }} 应该是 {{ item.FullName }}

原文由 samayo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Samayo的回答是对的，也许这个问题有点老了，但是有一些问题：

首先，请 避免 v-for 和 v-if 在同一个元素中！ （来源： https ://v2.vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential）

其次，如果您想将 v-if 与 || 一起使用运算符，只需使用计算或简单的方法。

最后，我认为如果您使用 camelCase，而不是 PascalCase 来表示变体或对象的键，这是更好的方法。

 <li v-if="fullNameIsExist(item)">
  <span>{{ item.fullName }}

如果你使用一种方法：

 methods: {
  fullNameIsExist (item) {
    if (![null, ''].includes(item.fullName)) return true
  }
}

原文由 Kamocsai Kamo András 发布，翻译遵循 CC BY-SA 4.0 许可协议