title: Vue JS pass a value inside to a CSS property
body: <p>I'm developing an exams portal application.</p>
  
  <p><a href="https://i.stack.imgur.com/4ab7S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4ab7S.png" alt="enter image description here"></a></p>
  
  <p>and this is my code.</p>
  
  <pre><code>&lt;div class="" v-for="areas in knowledgeAreas"&gt;
          {{areas.area}}&lt;div class="progress"  style="margin-top:10px;"&gt;
            &lt;div class="progress-bar"  style="width:50%"&gt;{{areas.correctlyMarkedAnswers}} out of {{areas.numberOfQuestion}}&lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>data(){
      return{
        knowledgeAreas :[
          { area: 'Math',numberOfQuestion:10,correctlyMarkedAnswers:3,correctAnswersPercentage:12 },
          { area: 'IQ',numberOfQuestion:10,correctlyMarkedAnswers:5,correctAnswersPercentage:5 },
          { area: 'GK',numberOfQuestion:10,correctlyMarkedAnswers:8,correctAnswersPercentage:3 }
        ]
      }
    }
  </code></pre>
  
  <p>What I want is to dynamically pass the <code>correctAnswersPercentage</code> property's value to the CSS width property.</p>