javascript - 我可以在 Vue 中使用带有箭头函数的样式绑定(bind)吗?

标签 javascript html css vue.js vuejs2

我正在尝试在 Vue JS HTML 模板中将样式与箭头函数绑定(bind)。我的目的是显示/隐藏来自 vuex 存储的 div。

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

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

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

最佳答案

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

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

直接设置值即可:

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

关于javascript - 我可以在 Vue 中使用带有箭头函数的样式绑定(bind)吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48678029/

相关文章:

javascript - 如何通过 AJAX 从 React 应用程序内的外部服务加载 React 组件

javascript - Redux Saga 错误 : takeLatest$1 requires a pattern or channel

html - 如何在wordpress中使用谷歌字体?

html - CSS 如何自动调整我的 div 大小以适应内容?

javascript - js中的字符串到日期转换器问题

javascript - AngularJS V1.4.7指令templateUrl动态路径

html - 表单标签弄乱了我的网站

javascript - 如何使用 jQuery Mobile 正确预增强 Mustache 模板?

html - 具有 100% 高度的 flex DIV -(页眉高度 + 页脚高度)

html - 在手机上激活按钮?