Vue.js 为什么Vuejs会禁用媒体查询添加和删除组件的功能

既然我有这个

//mycompoent.js

Vue.component('main-nav',{
    template:`
     <div id="main-nav">
     </div>
    `
}); 

Vue.component('menu-nav',{
    template:`
     <div id="menu-nav">
     </div>
    `
});

new Vue({
}).$mount("#nav-app");

然后在我的CSS中我有以下内容

//style.css

#menu-nav{display:none;}

@media (max-width:840px){
   #main-nav{display:none;}
   #menu-nav{display:block;}
}

//index.html

<div id="nav-app">
    <main-nav />
    <menu-nav />
</div>

---

当我将浏览器的大小调整到840px以下时，菜单导航组件将不会出现；我不知道我做错了什么。

如果在没有编译步骤的情况下直接在浏览器中测试，则不能对组件使用自动关闭表单。请尝试以下操作：