vue - best way to change font size in a word cloud?

Hi,

I say I have a loop in my Vue project that outputs the following

apple(112) pear(60) banana(60) kiwi(15) coconut(10) strawberry(6) strawberry(4)

I would like to make the word apple 60px make the words pear and banana 40px make the word kiwi 20px make the word coconut 15px make the word strawberry and peach 12px

or something similar

so I could probably do something like :

if(word.value > 100) {
	font-size: 60px
(or add a class)
} else if(word.value => 50 || word.value <= 100) {
	font-size: 40px
(or add a class)
} .. and so on

What is the best way to tackle this?

mvd

3 years ago

Level 48

@boyjarv

You can make a new method, example 'styling'

styling(count) {

            switch (true) {
                case (count < 5):
                    return 'font-size: 12px;'
                    break;
                case (count < 50):
                    // between 5 and 50
                    return 'font-size: 20px;'
                    break;
                case (count < 100):
                    // between 50 and 100
                    return 'font-size: 40px;'
                    break;
                case (count > 100):
                    return 'font-size: 60px;'
					break;			
                default:
                    return 'font-size: 12px;'
            }
        },

And in the template for the tag cloud, something like

// Loop over tags
<div :styling="styling(word.value)" v-text="word.name"></div>

Please or to participate in this conversation.