Vue v-if语句如何检查变量是否为空或null

Question

我正在尝试使用 v-if 语句，只有在 archiveNote 变量非空/非null时才显示一些HTML。

<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>

当archiveNote被输出为空时，HTML块仍然显示。

- d1596

---

控制台在哪里？它事后被修改了吗？ - depperm

Answer 1

如果要在truthy（非空/非null等）时仅显示<div>，可以简单地执行以下操作：

<div v-if="archiveNote">

这将得到与双重否定相同的结果：

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

这两个表达式将JavaScript的所有8个falsy值都计算为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>

- Dan

Answer 2

可能是因为在父组件中，您将变量分配给了错误命名的属性:archive-name="archiveName"，而不是:archiveName="archiveName"。

- Eggon

---

这似乎不是这种情况。[doc]（https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case） - depperm