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

Posted 2023-02-23

【中文标题】Vue v-if 语句检查变量是不是为空或 null

【英文标题】：Vue v-if statement to check if variable is empty or nullVue v-if 语句检查变量是否为空或 null

【发布时间】：2020-07-01 21:45:19

【问题描述】：

我正在尝试使用 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 为console.log 时，HTML 块仍显示为空

【问题讨论】：

控制台在哪里？事后修改了吗？

【参考方案1】：

如果您只想在truthy 时显示<div>（不是空/null/等），您可以简单地这样做：

<div v-if="archiveNote">

这给出了与double bang 相同的结果：

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

【参考方案2】：

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

【讨论】：

这个好像不是doc