Vue3 - print function result into p vs print function to css section inside html tag - vue.js

Question

let's say I have a very simple setup using data() and a function written in the methods part. With the function I'm returning a random number between 1 and 3, while the data contains an list of blog elements.
When displaying the result from randomNumber directly on the page using <p>{{randomNumber()}}</p> the value (1-3) get's printed. In my case I'm printing all posts from blogs using v-for on the parent div.
When however, trying to alter a css class with said number the number does not get printed. For this particular test I have made .g1, .g2 and .g3 with different style attributes. When inspecting the source code directly in the browser the .blog-thumb class has g{{randomNumber()}} as a second class.
i tried to call randomNumber() within the blogs item but I'm still unable to add the generated class to the css class section.
Thank you for your help or suggestions.
HTML:
<div class="col" v-for="blog in blogs" :key="blog.id">
<div class="blog-thumb g{{randomNumber()}}"> <!-- DOES NOT GET PRINTED -->
{{randomNumber()}} <!-- GETS PRINTED -->
<p class="date">{{ blog.date }}</p>
</div>
<h2>{{blog.title}}</h2>
<p>{{blog.content}}</p>
</div>
Vue:
methods : {
randomNumber : function(){
return Math.floor(Math.random() * 3+1);
}
},
data() {
return{
blogs: [
{
id: '1',
title: 'Amet consectetur adipisicing',
date: 'March 3rd 2022',
content: 'Lorem ipsum...'
},
{...}
]
}
}

Answer 1

after fiddling with it for quite a while today I found this solution:
I changed the function to return a complete classname (in this case, g with a random number between 1 and 3)
randomNumber : function(){
return 'g' + Math.floor(Math.random() * 3+1);
}
in the html part I added the v-bind to the class and passed the function (v-bind:class="randomNumber()")
<div class="col" v-for="blog in blogs" :key="blog.id">
<div class="blog-thumb" v-bind:class="randomNumber()">
<p class="date">{{ blog.date }}</p>
</div>
<h2>{{blog.title}}</h2>
<p>{{blog.content}}</p>
</div>
with this, now every col blog-thumb class got another generated class added to it.