css挂载动态样式，使用变量动态展示

Niu_Hongyang

已于 2024-02-23 17:59:00 修改

阅读量519

点赞数 11

文章标签： javascript 前端 css

于 2024-01-23 17:33:44 首次发布

本文链接：https://blog.csdn.net/Niu_Hongyang/article/details/135777328

版权

本文介绍了如何在Vue或类似的框架中，通过CSS变量和三元表达式在HTML模板中动态挂载样式，包括使用class和style属性，以及如何结合SCSS进行样式定义。

摘要由CSDN通过智能技术生成

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>