I recently started delving into Vue.js, and decided to try my hand at some custom class/style bindings, so I made a small app that's supposed to cycle through each "light" of a stoplight (red, yellow, green, red, etc.).
My Vue instance has a data property count
, which is initially set to 0
, and I also have a setInterval
callout that is to increments the count
every one second.
Each "light" in the stoplight 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" based on some modulus arithmetic against my Vue instance's count
.
I'm wondering if perhaps I could be handling the change in these classes more efficiently, but am not sure what could be done.
Here is my current code:
var app = new Vue({
el: '#app',
data: {
count: 0,
styleObject: {
display: 'block',
width: '30px',
margin: '0',
borderRadius: '50px',
border: '1px solid black'
}
}
});
setInterval(function() {
app.count = app.count + 1;
}, 1000);
#light {
background-color: yellow;
display: inline-block;
border: 2px solid black;
margin: 10px;
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<div id='light'>
<input type='button' id='red' :class='["btn", (count % 3 === 0) && "btn-danger"]' :style='styleObject' />
<br />
<input type='button' id='yellow' :class='["btn", (count % 3 === 1) && "btn-warning"]' :style='styleObject' />
<br />
<input type='button' id='green' :class='["btn", (count % 3 === 2) && "btn-success"]' :style='styleObject' />
</div>
</div>