<div id="example">
<blocks></blocks>
</div>
<template id="blocksTemplate">
<div class="blocks">
<div v-for="(item, index) in blocks"
:key="index" class="block" v-bind:class="'block_' + index">
class: block_{{ index }}
</div>
</div>
</template>.blocks {
margin: 20px auto;
max-width: 60%;
text-align: center;
}
.block {
padding: 1rem 2rem;
}
$class: block_;
@for $i from 0 through 5 {
.#{$class}#{$i} {
background-color: darken(lightblue, 0% + $i*4);
}
}Vue.component('blocks', {
template: '#blocksTemplate',
data: function() {
return {
blocks: new Array(6)
}
}
})
new Vue({
el: '#example'
})