In general, there is a skills block with percentages, how can you display a line by the number of percentages through vue?

Question

Vue.js

there is such a code
as through vue you can draw a line
knowing the number of percent

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

Answer 1

First, let's describe the elements of the list as an array of objects, where text and percentage will be separate properties:

items: [
  { name: "PHOTOSHOP", percent: 88 },
  { name: "ILLUSTRATOR", percent: 92 },
  { name: "SKETCH", percent: 90 },
  { name: "AFFTER EFFECTS", percent: 98 },
],

Then we will make a method that will generate styles for drawing a line (you can use the border of an element as a line, border-bottomfor example):

methods: {
  getStyle: item => ({
    'border-bottom': `3px solid ${item.color}`,
    width: `${item.val}%`,
  }),
},

And finally, render the list:

<ul>
  <li
    v-for="item in items"
    :style="getStyle(item)"
  >
    {{ item.name }} {{ item.percent }}%
  </li>
</ul>

https://jsfiddle.net/3zy8Lh7p/