function updateCounter(change) {
// 1. Get current value
var count = parseInt($('#counter').text());
// 2. Calculate new value
var newCount = count + change;
// 3. Update DOM element 1
$('#counter').text(newCount);
// 4. Update DOM element 2
var progress = (newCount / 10) * 100;
$('#progress-bar').css('width', progress + '%');
// 5. Update DOM element 3
if (newCount > 5) {
$('#status').text('High!').addClass('warning');
} else {
$('#status').text('Normal').removeClass('warning');
}
// 6. Update DOM element 4...
// Oops! Forgot to update the color indicator!
}export default {
data() {
return {
count: 0
}
},
computed: {
// Automatically updates when count changes
progress() {
return (this.count / 10) * 100;
},
status() {
return this.count > 5 ? 'High!' : 'Normal';
},
isWarning() {
return this.count > 5;
}
}
}
// Template - just declare what the UI should look like
<template>
<div class="status" :class="{ warning: isWarning }">
{{ status }}
</div>
</template>