【在vue动态样式设置】

在vue动态样式设置

提示：主要是工作中使用到样式动态修改方式，做归纳

---

---

前言

提示：这里可以添加本文要记录的大概内容：

用于工作中样式绑定，切换。项目开发一般是vue.js ： 其他博主

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、内联样式绑定

注意style样式中带-的，在对象中-后面的要大写。background-color要写成backgroundColor

  <div :style="{ backgroundColor: bgColor, color: fontColor }">Dynamic Color Example</div>

  data() {
    return {
      bgColor: 'lightblue',
      fontColor: 'darkblue'
    };
  },

1.绑定样式对象

1).样式对象

直接动态绑定样式对象
:style=“dynamicStyles”

<div :style="dynamicStyles"></div>

在 Vue 实例中：

data() {
  return {
    dynamicStyles: {
      color: 'red',
      fontSize: '16px'
    }
  };
}

1).样式对象数组

使用一个数组来动态地设置元素的样式。数组中的每个元素都是一个包含样式对象的变量或表达式。

<div :style="[baseStyles, dynamicStyles]"></div>

在 Vue 实例中：

data() {
  return {
    baseStyles: {
      backgroundColor: 'blue'
    },
    dynamicStyles: {
      color: 'red',
      fontSize: '16px'
    }
  };
}

示例：在Vue.js中设置元素的文字颜色，可以使用内联样式绑定的方式 ; 格式 如下

 :style="{ color: isActive ? 'red' : '' }"   

或

 :class="{ colorClass: isActive }"   

2.绑定元素的 Class

通过绑定类名来控制元素的样式。首先，定义一些 CSS 类来设置不同的文字颜色：colorClass red-text default-text

根据isActive 切换样式类代码如下（示例）： <div :class="isActive ? 'color' : 'errorColor'"></div>

<div :class="isActive ? 'color' : 'errorColor'"></div>

:class="{ colorClass: isActive }"
// 或 
<div :class="{ 'red-text': currentHandleId === item.id, 'default-text': currentHandleId !== item.id }">内容</div>
// 样式
<style>
  .color{
  }
  .errorColor{
  }
 //  样式：colorClass red-text default-text
</style>

3.计算属性

使用计算属性可以更清晰地控制条件样式。

首先，在 Vue 实例中定义计算属性：

computed: {
  textColor() {
    return this.currentHandleId === this.item.id ? 'red' : '';
  }
}

然后在模板中使用该计算属性：

<div :style="{ color: textColor }">内容</div>

---

示例： 如下

  <div :style="wrongGroupTotalEleInterStyle"></div>
  computed: {
  wrongGroupTotalEleInterStyle() {
    return {
      '--stateColor': '#000'
     }
  }
}

  

---

二、绑定元素的 Class

1.引入库

代码如下（示例）： <div :class="isActive ? 'color' : 'errorColor'"></div>

三、动态样式对象 css变量

使用 CSS 变量（也称为自定义属性）并将其绑定到元素的样式中，在vue 一般都是绑定到元素style上

:root {
  --element-color: blue;
}

通过 v-bind:style 或者 :style 将 CSS 变量绑定到元素的样式中，例如：

<div :style="{ '--element-color': someVariable }">Hello</div>

示例中，someVariable 是一个 Vue 实例中的变量，你可以根据需要来动态地设置它。然后，你可以在 CSS 中使用这个变量：

div {
  color: var(--element-color, black); /* 使用变量 --element-color，并提供一个备用值 */
}

这样，元素的颜色就会根据 someVariable 的值而动态变化。如果 someVariable 的值改变了，元素的颜色也会相应地更新。

---

总结

提示：这里对文章进行总结：
一般单个样式：

  <div :style="{ backgroundColor: bgColor, color: fontColor }">Dynamic Color Example</div>

多个样式：

  <div :class="{ 'highlighted': isHighlighted }">Dynamic Color Example</div>

或者使用js获取dom 修改styley也是可以的