Vue JS将值传递给CSS属性

Question

我正在开发考试门户应用程序。

这是我的代码。

<div class="" v-for="areas in knowledgeAreas">
        {{areas.area}}<div class="progress"  style="margin-top:10px;">
          <div class="progress-bar"  style="width:50%">{{areas.correctlyMarkedAnswers}} out of {{areas.numberOfQuestion}}</div>
        </div>

      </div>

和

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 }
      ]
    }
  }

我想要的是将correctAnswersPercentage属性的值动态传递给CSS width属性。

Answer 1

我创建了getProgress方法，然后correctAnswersPercentage在迭代过程中传递的值。

请检查以下代码段：

new Vue({
	el: "#app",
  data: {
      knowledgeAreas :[
        { area: 'Math',numberOfQuestion:10,correctlyMarkedAnswers:3,correctAnswersPercentage:50 },
        { area: 'IQ',numberOfQuestion:10,correctlyMarkedAnswers:5,correctAnswersPercentage:60 },
        { area: 'GK',numberOfQuestion:10,correctlyMarkedAnswers:8,correctAnswersPercentage:70 }
      ]
    },
    methods: {
    	getProgress: function(width) {
      	return {
          'width': width + '%',
          'background-color': 'yellow'
        };
      }
    }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="app">
<div class="" v-for="areas in knowledgeAreas">
        {{areas.area}}<div class="progress"  style="margin-top:10px;">
          <div class="progress-bar"  v-bind:style="getProgress(areas.correctAnswersPercentage)">{{areas.correctlyMarkedAnswers}} out of {{areas.numberOfQuestion}}</div>
        </div>
      </div>
</div>