vue.js. How to get CSS class name from Data property?

Question

Vue.js

There is an array of data:

data (){
    return {
      notes:[
        {
          title: 'First Note',
          descr: 'Description for first note',
          date: new Date(Date.now()).toLocaleString(),
          info: 'int'
        },
        {
          title: 'Second Note',
          descr: 'Description for fsecond note',
          date: new Date(Date.now()).toLocaleString(),
          info: 'exc'
        },
        {
          title: 'Third Note',
          descr: 'Description for third note',
          date: new Date(Date.now()).toLocaleString(),
          info: 'imp'
        }
      ]
    }
  }

The info - array contains the names of the CSS classes. This array is displayed in the component template:

<template>
  <div class="notes">
    <div class="note" :class="{ full: !grid }" v-for="(note, index) in notes" :key="index">
      <div class="note-header" :class="{ full: !grid }">
        <p>{{ note.title }}</p>
        <p style="cursor: pointer" @click="removeNote(index)">&#10005;</p>
      </div>
      <div class="note-body">
        <P>{{ note.descr }}</P>
        <div class="note-info">
          <span class="note-data">{{ note.date }}</span>
          <span class={{ 'ТУТ должно быть название класса из note.info' }}></span>// Этому элементу необходимо присвоить CSS класс.
        </div>
      </div>
    </div>
  </div>
</template>

In the v-for="(note, index) in notes" :key="index" loop, at each iteration we get and display data from the notes array , while the elements of the info array contain the required name of the CSS class. I can't figure out how to get and assign a class from the value of note.info to a DOM element of the CSS tree?

Answer 1

<span :class="note.info"></span>