javascript - VueJS 2.0 : Using V-if to Check the Existence of a Custom 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，因此会显示关闭按钮。