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

Question

我正在尝试在 Vue JS HTML 模板中使用箭头函数绑定(bind)样式。我的目的是显示/隐藏来自 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' }">