如何在 VueJS 的 v-if 中使用多个条件? [英] How can I use multiple condition in v-if in VueJS?

问题描述

这是我的代码:

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 中放入两个条件?

This v-if=" item.FullName != null || item.FullName != '' " does not work, Why? How can I put two condition inside a v-if?

推荐答案

也许这就是您将空字符串视为假值的方式，|| 说:如果有任何一个，则显示全名两个(左/右)表达式是真的，我想这不是你想要的.

Maybe it's the way you are treating empty strings as false-ly values and || is saying: show fullname if any of the two (left/right) expressions are true, which is not what you want I think.

试试这个:

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

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

Also, judging from your code, {{ FullName }} should be {{ item.FullName }}

这篇关于如何在 VueJS 的 v-if 中使用多个条件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！