<ul id="app">
<li class="price"
:class="{ red: price <= 100, green: price > 100 }"
v-for="(price, date) in sales">
{{ date }} ____ $ {{ price }}
</li>
</ul>.red {
color: red;
}
.green {
color: green;
}
.price {
letter-spacing: 4px;
}var vue = new Vue({
el: "#app",
data: {
sales: {
'2020-01-01': 100,
'2020-01-02': 200,
'2020-01-03': 300
}
}
});
External CSS
This Pen doesn't use any external CSS resources.