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>

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

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

然后我会简单地检查关闭的属性是否存在。我尝试使用 <button v-if="close"></button> 这样做，但那没有用。

所以，我想知道这是否可行以及（如果可行）如何实现。

在此先感谢您提供的任何帮助。

Answer 1

如果你设置属性的默认值是false，那么你可以通过检查属性是否正好是false来决定是否显示按钮：

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

然后你可以这样检查：

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

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

VueJS 2.0: Using V-if to Check the Existence of a Custom Prop