我正在尝试使用 v-if
仅当 archiveNote
时才显示一些 HTML 的语句变量不为空/null。
<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 block 仍然显示是 console.log
空的
最佳答案
如果要显示 <div>
只有当它是 truthy (不是空/空/等),您可以简单地执行以下操作:
<div v-if="archiveNote">
这给出了与 double bang 相同的结果:<div v-if="!!archiveNote">
这两个表达式都计算 JavaScript 的全部 8 个 falsy值为 false
:false
null
undefined
NaN
''
0n
(大整数) 和其他一切到
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>
关于javascript - Vue v-if 语句检查变量是否为空或 null,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60779512/