我使用 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>
这样做,但这没有用。
所以,我想知道这是否可行以及(如果可行)如何实现。
在此先感谢您提供的任何帮助。
最佳答案
如果您将属性的默认值设置为false
,那么您可以检查该属性是否恰好为false
,以确定是否显示按钮:
props: {
close: {
default: false,
},
}
然后你可以这样检查:
<button v-if="close !== false"></button>
当您将 close
属性添加到 modal
组件而未指定值时,该值将等于一个空字符串:''
。因此,它不会等于 false,因此会显示关闭按钮。
关于javascript - VueJS 2.0 : Using V-if to Check the Existence of a Custom Prop,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42981587/