我可以在Vue中使用带箭头功能的样式绑定吗？

Question

我试图在Vue JS HTML模板中使用箭头函数绑定样式。我的目的是显示/隐藏来自vuex商店的div。

这是我尝试这样做的。已通过main_activity_opened将mapState调用到组件。

<div 
   class="main-panel"
   :style="{ display: () => main_activity_opened ? 'block' : 'none' }">

它不起作用。我想知道这种方法是否是一个好主意，如果可以做到，欢迎提出建议。

Answer 1

您可以使用对象表示法设置元素的样式，如示例所示。

但是，您不能将函数作为属性值提供，并期望函数的返回值在元素的内联样式中使用。

只需直接设置值：

:style="{ display: main_activity_opened ? 'block' : 'none' }">