仅适用于移动屏幕的字段绑定样式

Question

我正在尝试使用 Bulma 和 Vue.js 制作导航栏，而 Bulma 有这样的东西，当导航栏折叠到汉堡菜单时，里面的下拉列表已经处于 display: block; 模式。所以我找到了一种解决方法，但它也将相同的样式应用于所有屏幕尺寸。

然后我尝试只在模板中绑定这样的样式

<div class="navbar-dropdown" :style="@media screen and (max-width: 900px){display: this.displayBlockAcad}">

这给了我这个错误

invalid expression: Invalid or unexpected token in

@media screen and (max-width: 900px){display: this.displayBlockAcad}

我为演示制作了this jsfiddle。如果您从第 26 行删除 @media screen and (max-width: 900px)，jsfiddle 将正常运行，但第 22 行中的 is-hoverable 类将不再工作。有没有一种方法可以让下拉菜单在桌面屏幕上悬停，同时使用我自己的媒体屏幕方法

Answer 1

你犯了错误，对于绑定样式，我们必须传递一个对象而不是字符串。 :style 不是有效的绑定属性。如果你想声明一个@media 表达式，然后在样式标签之间或css文件中写入，并给出一个唯一的类并将其分配给你的元素。

v-bind:style="{key:property}" // object passing

这里是如何在 vue.js 中绑定样式的链接 https://vuejs.org/v2/guide/class-and-style.html