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，因此会显示关闭按钮。