vue css 引用data 变量

今天用element的进度条组件 想做一个进度条动画 就涉及到把进度条的百分比传到css 里面

   

      

        
      
      

        
      
    


.progress {
    :deep(.el-progress-bar__outer) {
      background-color: #161616;
      border: 2px solid #48a1fe;
    }
    .month{
      :deep(.el-progress-bar__inner){
         animation: move 1s linear 0s 1;
      }
      
    }
    .year{
      :deep(.el-progress-bar__inner){
         animation: move1 1s linear 0s 1;
      }
    }
    @keyframes move {
      from {
        width: 0;
      }
      to {
        width: var(--width);
      }
    }
     @keyframes move1 {
      from {
        width: 0;
      }
      to {
        width: var(--width);
      }
    }
  }