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

【问题标题】：How can I use multiple condition in v-if in VueJS?如何在 VueJS 的 v-if 中使用多个条件？
【发布时间】：2018-05-10 22:47:59
【问题描述】：

这是我的代码：

JavaScript

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

Index.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 中添加两个条件？

【问题讨论】：

【解决方案1】：

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

试试这个：

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

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

【讨论】：

【解决方案2】：

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

首先，请避免 v-for 和 v-if 在同一个元素中！（来源：https://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
  }
}

【讨论】：

【解决方案3】：

您可以创建一个 computed property 来评估所有条件，然后为您的计算属性创建一个 v-if。它将使您的模板更清晰，并且计算的属性将为self documenting。

【讨论】：

【解决方案4】：

最好的方法是使用计算的东西

computed: {
    condition() {
      this.FullName;
      return this.FullName !== null && this.FullName !== '';
    }
  }

这是条件吗

<li v-for="item in Names" v-if="condition>

你应该使用{{ item.FullName }} 而不是{{ FullName }} 你的条件几乎是正确的，但错误是因为{{ FullName }} 这就是为什么你应该写{{ item.FullName }} 而因为|| 而你最好使用&& 你也可以这样做：

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

【讨论】：

【解决方案5】：

简单易行。

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

在 Javascript 中，!!0 将返回 false，!!1 将返回 true，!!"" 将返回 false，!!"a" 将返回 true，!!null 将返回 @987654

【讨论】：