仅将样式绑定到移动屏幕的字段

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是用于演示。如果您删除@media screen and (max-width: 900px)从第26行的jsfiddle将没有错误，但is-hoverable第22行中类，则无法运行了。使用我自己的媒体屏幕方法时，有什么方法可以使下拉菜单在桌面屏幕中徘徊

Answer 1

您正在错误，因为绑定样式，我们必须传递一个对象不是字符串。 ：style不是有效的绑定属性。如果要声明@media表达式，请在style标签之间或css文件中编写，并提供一个唯一的类并将其分配给您的元素。

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

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