在 Vue 中,可以使用 v-bind 指令绑定样式,动态更新组件的长度。可以在组件的 computed 属性中计算出要绑定的样式,并在组件的 template 中使用 v-bind 指令绑定样式。同时,也可以使用 watch 监听组件的数据变化,并在数据变化时更新样式。
例如:
computed: {
navbarStyle() {return {
'max-height': this.showRightBar ? '50px' : '0px'
}
}
},
template: `
<div v-bind:style="navbarStyle">
<!-- navbar content -->
</div>
`,
watch: {
showRightBar(newVal) {
if (!newVal) {
this.navbarStyle['max-height'] = '0px'
} else {
this.navbarStyle['max-height'] = '50px'
}
}
}
这样,在切换页面时,只需要更改 showRightBar 的值即可更新导航栏的长度。