VueJS多条件v-if

Question

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

这是我的代码:

JS

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？

谢谢!!

Answer 1

也许这就是你将空字符串视为错误值的方式并且||说,如果两个(左/右)表达式中的任何一个产生true,则显示fullname,这不是你想要的.

试试这个:

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

另外,从您的代码判断,{{ FullName }}应该是{{ item.FullName }}

Answer 2

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

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

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

最后，我认为如果您使用驼峰式大小写是更好的方法，而不是用于变体或对象键的 PascalCase。

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

如果你使用一种方法：

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