Vue.js. Как получить название CSS класса из 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'
				}
			]
		}
	}

В info - массива находятся название CSS классов. Данный массив выводится в шаблоне компонента:

<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>

В цикле v-for="(note, index) in notes" :key="index" на каждой итерации получаем и выводим данные из массива notes, при этом в элементах массива info - указано необходимое название CSS класса. Не могу сообразить, как из значения note.info - получить и присвоить элементу DOM дерева CSS класс?