vue侧边导航栏收缩展开
时间: 2023-09-28 12:07:42 浏览: 71
要实现侧边导航栏的收缩和展开,可以使用Vue的动态绑定class和style的功能。
首先,在Vue组件中定义一个data属性,用来控制导航栏的状态:
```
data() {
return {
isCollapsed: false // 默认展开
}
}
```
然后,在模板中使用`v-bind:class`和`v-bind:style`指令,根据`isCollapsed`的值动态添加类名和样式:
```
<template>
<div>
<div class="sidebar" :class="{'collapsed': isCollapsed}">
<!-- 导航栏内容 -->
</div>
<button @click="toggleSidebar">收缩/展开</button>
</div>
</template>
<style>
.sidebar {
width: 200px;
transition: width 0.5s ease-in-out;
}
.sidebar.collapsed {
width: 50px;
}
</style>
```
最后,在Vue组件中定义一个方法,用来改变`isCollapsed`的值:
```
methods: {
toggleSidebar() {
this.isCollapsed = !this.isCollapsed;
}
}
```
这样,点击收缩/展开按钮时,就会触发`toggleSidebar`方法,改变`isCollapsed`的值,导致导航栏的样式发生变化。