VueJ에서 v-if의 여러 조건을 사용하려면 어떻게 해야 합니까?

VueJ에서 v-if의 여러 조건을 사용하려면 어떻게 해야 합니까?

코드는 다음과 같습니다.

자바스크립트

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?

빈 문자열을 거짓된 가치로 취급하는 방식일 수도 있고||두 표현 중 하나라도 참일 경우 풀네임을 표시해 주십시오.제 생각은 다릅니다.

대신 다음을 시도해 보십시오.

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

또한, 당신의 코드로 판단하건대{{ FullName }}그래야 한다{{ item.FullName }}

Samayo의 답변은 옳고, 이 질문은 조금 오래된 것일지도 모르지만, 몇 가지 문제가 있습니다.

먼저 동일한 요소에 v-for가 포함된 v-for는 사용하지 마십시오(출처: https://vuejs.org/v2/style-guide/ #v-if-with-v-필수 항목).

둘째, v-if를 || 연산자와 함께 사용하려면 계산된 간단한 방법을 사용하십시오.

마지막으로 Pascal Case가 아닌 camel Case를 사용하는 것이 더 좋다고 생각합니다.

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

또한 방법을 사용하는 경우:

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

모든 조건을 평가하는 계산된 속성을 생성한 다음 계산된 속성에 대해 단일 v-if를 가질 수 있습니다.그러면 템플릿이 더 깨끗해지고 계산된 속성이 자동으로 문서화됩니다.

가장 좋은 방법은 계산된 것을 사용하는 것입니다.

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

그리고 그것은 조건으로서

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

대신{{ FullName }}를 사용해야 합니다.{{ item.FullName }}컨디션은 거의 맞았지만, 에러는{{ FullName }}그래서 네가 글을 써야 하는 거야{{ item.FullName }}그 때문에||그 대신에, 당신은 사용하는 것이 좋을 것이다.&&또한 다음과 같은 작업을 수행할 수 있습니다.

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

심플하고 간단합니다.

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

Javascript에서는!!0돌아온다false,!!1돌아온다true,!!""돌아온다false,!!"a"돌아온다true그리고.!!null돌아온다false

언급URL : https://stackoverflow.com/questions/47515308/how-can-i-use-multiple-condition-in-v-if-in-vuejs