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

Question

我试图仅在v-if变量不为空/空的情况下使用archiveNote语句显示一些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 console.log为空时，HTML块仍然显示

Answer 1

如果您想在archiveNote不为空时显示div，那么它将是：

v-if="archiveNote !== null && archiveNote !== ''"

否则，您要告诉Vue仅在null或''时显示它。使用double bang：

可以更全面，更简洁地完成此操作

v-if="!!archiveNote"

它将对false进行以下评估：

• false
• null
• undefined
• 0
• -0
• NaN
• ''

和其他事项true。或者您可以简单地做到：

v-if="archiveNote"

Answer 2

这可能是由于您在父组件中将变量分配给名称错误的道具:archive-name="archiveName"而不是:archiveName="archiveName"造成的。