Css 仅针对移动屏幕将样式绑定到字段

我试图使用Bulma和Vue.js制作一个导航栏，Bulma有这样一个功能，当导航栏折叠到hamburg菜单时，其中的下拉列表已经在

display:block中模式。因此，我找到了一个解决办法，但它也适用于所有屏幕大小相同的风格

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

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

我做了演示。如果从第26行中删除
@媒体屏幕和（最大宽度：900px）
，jsfiddle将正常运行，但第22行中的
类将不再工作。在使用我自己的媒体屏幕方法时，有没有一种方法可以使下拉菜单在桌面屏幕上悬停
您犯了一个错误，对于绑定样式，我们必须传递一个对象而不是字符串：样式不是有效的绑定属性。如果要声明@media表达式，请在样式标记之间或css文件中写入，并指定一个唯一的类并将其分配给元素

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

下面是如何在vue.js中绑定样式的链接
你能详细说明一下吗？
给一个唯一的类并将其分配给你的元素。
因为我很难弄清楚如何动态更改媒体屏幕的样式。请理解，@media是一个css标记，用于检测样式表中窗口的宽度。但在javascript中，您有很大的灵活性，所以您可以通过if（screen.width>800px）document.getElementById（'mydiv'）.style.display='block'来更改它；就这样。完成任务。。。下面是一个示例，请不要混淆css中的媒体标记和检测媒体的javascript方式。。理解，样式的继承，外部样式可以通过内联样式自动覆盖。如果您正在开发基于web的开发，您也可以使用window.innerWidth>800等进行检查。好的，这就是我所问的问题的答案，但我仍然没有得到我想要实现的。如果我删除
@媒体屏幕和（最大宽度：900px）
，我可以用我的JSFIDLE做与您的JSFIDLE相同的事情，问题是我的
是可悬停的
类不会响应。我真的很感谢您迄今为止的帮助，但您能告诉我如何使下拉式鼠标悬停在桌面屏幕上吗？为什么不创建两个不同的html元素，一个使用click trigger，另一个使用hover trigger？通过使用条件渲染v-if放置条件悬停元素显示单击元素渲染为什么要使事情复杂化。。。
v-bind:style="{key:property}" // object passing