Для начала опишем элементы списка в виде массива объектов, где текст и процент будут отдельными свойствами:
data: () => ({
items: [
{ name: 'PHOTOSHOP', val: 88, color: 'red' },
{ name: 'ILLUSTRATOR', val: 92, color: 'green' },
{ name: 'SKETCH', val: 90, color: 'orange' },
{ name: 'AFFTER EFFECTS', val: 98, color: 'blue' },
],
}),
Затем сделаем методы, который будут генерировать текст и стили для рисования линии (в качестве линии можно использовать границу элемента,
border-bottom например) у элемента списка:
methods: {
liText: item => `${item.name} ${item.val}%`,
liStyle: item => ({
'border-bottom': `3px solid ${item.color}`,
width: `${item.val}%`,
}),
},
И, наконец, отрендерим список:
<ul>
<li
v-for="n in items"
v-text="liText(n)"
:style="liStyle(n)"
></li>
</ul>
