Вообщем есть блок skills с процентами, как можно через vue вывести по количеству процентов линию?

Question

[I-am]

есть такой код
как через vue можно вывести линию
зная количество процентов

<ul>
  <li>PHOTOSHOP 88%</li>
  <li>ILLUSTRATOR 92%</li>
  <li>SKETCH 90%</li>
  <li>AFFTER EFFECTS 98%</li>
</ul>

Answer 1

[0xD34F]

Для начала опишем элементы списка в виде массива объектов, где текст и процент будут отдельными свойствами:

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>