Question

鉴于我有这个

//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时，菜单导航组件永远不会出现;我不知道我做错了什么。

Answer 1

如果您直接在浏览器中对此进行测试（没有编译步骤），则无法使用自动关闭表单<main-nav />作为组件。请尝试以下方法：

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

为什么Vuejs禁用媒体查询添加和删除组件的能力

1 个答案: