使用css变量，动态修改elmentUI元素样式；css样式

<template>
  <div>
    <h3>使用css变量，动态修改elmentUI元素样式；css样式</h3>
    <!-- 1   :style="{ '--styleInput': colorVal }"-->
    <el-input
      v-model="valueInput"
      :style="{ '--styleInput': colorVal }"
      @input="changeValueInput"
    ></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      valueInput: "",
      colorVal: "blue", //3 定义变量值
    };
  },
  created() {},
  methods: {
    changeValueInput() {
      //修改变量的值
      if (this.valueInput.length < 5) {
        this.colorVal = "red";
      } else if (this.valueInput.length < 10) {
        this.colorVal = "yellow";
      } else {
        this.colorVal = "black";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/* // 2 定义使用--  使用css变量 注意变量前需要加 -- */
::v-deep .el-input__inner {
  color: var(--styleInput);
}
</style>