VueJS 2.0：使用 V-if 检查自定义 Prop 是否存在

Question

我使用 VueJS 2.0 创建了一个自定义模式组件，其属性为“close”。我基本上让它按照我想要的方式工作，但想稍微改进一下。

我拥有的一项功能是可以选择添加关闭按钮，如下所示：

在 HTML 中添加 close="true" 的自定义属性

<modal close="true">
Etc...
</modal>

在JS文件中使用V-IF条件语句

<button v-if="close == 'true'></button>

结果是，如果 close 属性设置为 true，则关闭按钮出现，否则不会出现。这就是我想要的并且有效。

我的问题是我可以简化这个解决方案，以便我可以简单地设置 html 如下： <modal close>...</modal>。

然后我会简单地检查 close 属性是否存在。我尝试使用 来执行此操作<button v-if="close"></button>，但没有成功。

所以，我想知道这是否可能以及（如果可以）如何做到。

预先感谢您可以提供的任何帮助。

Answer 1

如果您将该属性的默认值设置为false，那么您可以检查该属性是否准确地false确定是否显示该按钮：

props: {
  close: {
    default: false,
  },
}

然后你可以这样检查：

<button v-if="close !== false"></button>

当您将close属性添加到modal组件而不指定值时，该值将等于空字符串：''。因此，它不会等于 false，因此会显示关闭按钮。