Found a little inconsistency in your Vue template
Using v-bind:
syntax here,
<div id="listContainer" v-bind:style="{ height: height + 'px'}">
... but using :
shorthand here:
<li v-for="number in numbers" :class="getClass(number)">
Useless variable app
const app = new Vue({ /* ... */ });
Do I need to say more?
Object method notation shorthand
Instead of using:
getOutput: function(number) { /* ... */ }
// ...
getClass: function(number) { /* ... */ }
You could use:
getOutput(number) { /* ... */ }
// ...
getClass(number) { /* ... */ }
Too specific CSS selector
You're specifying these selectors,
li.FizzBuzz { /* ... */ }
li.Fizz { /* ... */ }
li.Buzz { /* ... */ }
but there aren't any elements that would have these classes (FizzBuzz
, Fizz
and Buzz
) other than li
's. This means you could simplify it to:
.FizzBuzz { /* ... */ }
.Fizz { /* ... */ }
.Buzz { /* ... */ }