Question

vue m的新增功能，单击菜单图标时，导航栏必须切换，以创建垂直导航栏
我的菜单图标代码

    <button type="button" id="sidebarCollapse" class="btn btn-info [collapsed?'':'sidebar']"  >
    <i class="fas fa-align-left"></i>
    </button>

在菜单图标切换后，我想显示导航侧边栏

   <nav id="sidebar" class="sidebar">
    </nav>

我的Vue代码

  new Vue({
   e1:'#app',
   data:{
       collapsed:true
   }
})

它不会显示任何新内容，任何人都可以帮助我了解发生的事情

更新代码

Position.vue

  <template>
   <div class="wrapper">
     <nav id="sidebar" class="sidebar" v-if="showSidebar">  
       <ul class="list-unstyled component">
            <li class="active">
                <a href="#homeSubMenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
                <ul class="collapse list-unstyled" id="homeSubMenu">
                    <li class="dropdown-menu-mn">
                        <a href="#">Home1</a>
                        <a href="#">Home2</a>
                    </li>
                </ul>
            </li>                                                 
        </ul>
    </nav>        
        <div id="content">
            <nav>
                <div class="navbar navbar-expand-lg navbar-light bg-light">
                    <div class="container-fluid">

                        <button type="button" id="sidebarCollapse" class="btn btn-info" @click="toggleSidebar">
                          <i class="fas fa-align-left"></i>
                        </button>
                    </div>
                </div>
            </nav>
        </div>        
    </div>  
   </template>

  <script>
    new Vue({
    el:'#app',
    data: {
   showSidebar: false
    },
    methods: {
  toggleSidebar: function() {
     this.showSidebar = !this.showSidebar;
  }}})            
  </script>

更新脚本标记

    <script>
    export default{
    data() {
   showSidebar: false
    },
     toggleSidebar(){
     this.showSidebar = !this.showSidebar;
    } };   
   </script>

但是它仍然不起作用。现在仅出现菜单按钮，但切换按钮不起作用。任何人都能知道我哪里出了错

Answer 1

在按钮上添加@click侦听器

    <button type="button" id="sidebarCollapse" class="btn btn-info" @click="toggleSidebar">
       <i class="fas fa-align-left"></i>
    </button>

在侧边栏上添加v-if指令，以切换侧边栏的可见性

   <nav id="sidebar" class="sidebar" v-if="showSidebar">
    </nav>

添加method以处理 click 事件methods: toggleSidebar ....并切换v-if指令中使用的值

  new Vue({
   el:'#app',
   data: {
       showSidebar: false
   },
   methods: {
      toggleSidebar: function() {
         this.showSidebar = !this.showSidebar;
      }
   }
  })

vuejs应用程序不起作用集成了切换代码

1 个答案: