javascript – Vue.js Stoplight app – Dynamic change of classes in elements

I recently started going deep into Vue.js, and decided to try some custom class / style links, so I made a small application that is supposed to go through each "light" of a traffic light (red, yellow, green, red, etc.).

My instance of Vue has a data property tell, which is initially established in 0, and I also have a setInterval call that increases the tell every second

Each "light" in the semaphore has a Bootstrap button class associated with it (btn-danger for red, btn-warning for yellow, and btn-success for green), and each class becomes "active" depending on the arithmetic of some module compared to the instances of my Vue tell.

I wonder if maybe I could handle the change in these classes more efficiently, but I'm not sure what could be done.

Here is my current code:

var app = new Vue ({
the: & # 39; # app & # 39 ;,
data: {
account: 0,
styleObject: {
screen lock & # 39 ;,
width: & # 39; 30px & # 39 ;,
margin: & # 39; 0 & # 39 ;,
borderRadius: & # 39; 50px & # 39 ;,
Edge: & # 39; 1px solid black & # 39;
}
}
});

setInterval (function () {
app.count = app.count + 1;
}, 1000);
#ligero {
background color: yellow;
screen: online block;
Edge: 2px solid black;
margin: 10px;
Filling: 5px;
}