css挂载动态样式
<template>
<!-- 方式1 这种暂时无法直接挂载style-->
<div :class="{ myStyle: disabled }" />
<!-- 方式2 class style皆可-->
<div :class="disabled ? 'myStyle' : 'myStyle2'" />
<div :style="{ width: disabled ? '200px' : '300px' }" />
<!-- 方式3 传递变量-->
<div :style="{ '--height': height + 'px', '--maxHeight': maxHeight + 'px'}"/>
</template>
<script>
const disabled = true
</script>
<style scoped lang="scss">
.myStyle {
display: none;
min-height: var(--height);
max-height: var(--maxHeight);
}
</style>
如代码所示, disabled是个布尔变量,只需要在style或者class前面加冒号:就可以使用变量,
1、 { class样式 : 变量xxx }
ps:注意,需要多套一层大括号
2 、 使用三元表达式 变量xxx ? class样式a : class样式b
两种方法都可以,任选其一