MAD 2 Quiz 1 13 Jul 2025 — Question 15

1<div id="app">
2    <div :class="[baseClass, { highlighted: isHighlighted,
3       'btn-primary': isPrimary, 'btn-disabled': !isEnabled }]">
4        {{ buttonText }}
5    </div>
6    <button @click="toggleState">Toggle State</button>
7</div>

1const app = new Vue({
2    el: '#app',
3    data: {
4        buttonText: 'Click Me',
5        baseClass: 'btn',
6        isHighlighted: false,
7        isPrimary: true,
8        isEnabled: true
9    },
10    methods: {
11        toggleState() {
12            this.isHighlighted = !this.isHighlighted;
13            this.isPrimary = !this.isPrimary;
14            this.isEnabled = !this.isEnabled;
15        }
16    }
17})