vue v-if 문을 사용하여 변수가 비어 있는지 또는 null인지 확인합니다.

vue v-if 문을 사용하여 변수가 비어 있는지 또는 null인지 확인합니다.

를 사용하려고 합니다.v-if스테이트먼트는, 다음의 경우에 한정해, HTML 를 표시합니다.archiveNote변수가 비어 있지 않거나 비어 있지 않습니다.

<div v-if="archiveNote === null || archiveNote ===''" class="form-check ml-3" id="include-note-div">

인스턴스화된 방법은 다음과 같습니다.

export default {
    name: "ConfirmReleaseFilesModal",
    props: {
        archiveName: String,
        archiveNote: String
    },

이 다른 Vue 파일로부터 전달됩니다.

<confirm-release-files-modal
    v-if="showConfirmReleaseFilesModal"
    @cancel="closeModal"
    @confirmAndEmail="releaseAction"
    @confirmNoEmail="releaseAction"
    :archive-name="archiveName"
    :archive-note ="archiveNote"
>
</confirm-release-files-modal>

HTML 블록은 다음과 같이 표시됩니다.archiveNote이console.log텅 비어서

를 표시하는 경우는,<div>truthy(빈 상태/빈 상태 아님)일 경우에만 다음 작업을 수행할 수 있습니다.

<div v-if="archiveNote">

그 결과 더블 뱅과 같은 결과가 됩니다.

<div v-if="!!archiveNote">

이 두 표현 모두 JavaScript의 8가지 거짓 값을 평가하여false:

• false
• null
• undefined
• 0
• -0
• NaN
• ''
• 0n(BigInt)

기타 모든 것true따라서 변수가 이것들 이외의 것으로 평가되면, 그것은 진부하게 됩니다.v-if보일 겁니다.

다음은 이러한 예와 몇 가지 진부한 예제의 데모입니다.

new Vue({
  el: "#app",
  data() {
    return {
      falsy: {
        'null': null,
        'undefined': undefined,
        '0': 0,
        '-0': -0,
        '\'\'': '',
        'NaN': NaN,
        'false': false,
        '0n': 0n
      },
      truthy: {
        '[]': [],
        '{}': {},
        '\'0\'': '0',
        '1': 1,
        '-1': -1,
        '\' \'': ' ',
        '\'false\'': 'false',
        '5': 5
      }
    }
  }
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
#falsy, #truthy {
  display: inline-block;
  width: 49%;
}
.label {
  display: inline-block;
  width: 80px;
  text-align: right;
}
code {
  background: #dddddd;
  margin: 0 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div id="falsy">
    Falsy:
    <div v-for="(test, label) in falsy">
      <div class="label">{{ label }}</div>
      <code v-if="test">true</code>
      <code v-else>false</code>
    </div>
  </div>
  
  <div id="truthy">
    Truthy examples:
    <div v-for="(test, label) in truthy">
      <div class="label">{{ label }}</div>
      <code v-if="test">true</code>
      <code v-else>false</code>
    </div>
  </div>
</div>

부모 컴포넌트에서 잘못된 이름의 소품에 변수를 할당하는 것이 원인일 수 있습니다.:archive-name="archiveName"대신:archiveName="archiveName".

언급URL : https://stackoverflow.com/questions/60779512/vue-v-if-statement-to-check-if-variable-is-empty-or-null