Vue使用动态CSS

JWbonze

已于 2022-04-04 11:07:59 修改

阅读量1.8k

点赞数

分类专栏： # CSS # vue 文章标签： css css3 前端

于 2022-01-25 11:30:25 首次发布

本文链接：https://blog.csdn.net/JWbonze/article/details/122682013

版权

vue 同时被 2 个专栏收录

15 篇文章 2 订阅

订阅专栏

CSS

11 篇文章 1 订阅

订阅专栏

动态style

<p :style="{fontFamily:myFontFamily,color:myFontColor,backgroundColor:myBgColor}">
{{con.title}}
</p>

或者：

:style="'height:'+ contentFontSize +'rpx !important;'"

动态class

 :class="[activeTabIndex==0 ?'tab-active':'tab-default']"

其中activeTabIndex是vue中定义的变量，tab-active、tab-default是CSS类名（class名称）。
注意动态class内部是方括号[]，而动态style内部是{}
style赋值

document.getElementById("elementId").style.background="#ff0000";

结合computed

<template>
  <div :style="cssVars">
    <p class="text">测试文本</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: "red"
    };
  },
  computed: {
    cssVars() {
      return {
        "--color": this.color
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.text {
  color: var(--color);
}
</style>