Vue2.7以前

• HTMl

<Upload
   ref="upload" 
   :show-upload-list="false"
   :before-upload="handleBeforeUpload"
   :disabled="disabled"
   :max-size="maxSize"
   action
>

• style 作用区域范围内设置“CSS变量”

.info-img-wrap {
 --textAlignPosition: center;
 /deep/ .ivu-upload {
  text-align: var(--textAlignPosition);
 }
}

• js 通过setProperty()方法修改“--textAlignPosition”的值，从而间接改变对应子元素的（text-align）

mounted() {
   this.$nextTick(function () {
    this.$refs.upload.$el.style.setProperty(
     '--textAlignPosition',
     this.textAlign
    );
   });
}

Vue2.7以后

<template>
  <span> 有开始循环了-开端 </span>  
</template>
<script setup>
  import { reactive } from 'vue'
  const state = reactive({
    color: 'red'
  })
</script>
<style scoped>
  span {
    /* 使用v-bind绑定state中的变量 */
    color: v-bind('state.color');
  }  
</style>