Vue Add multiple classes conditionally

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Add multiple classes conditionally </h3>
        <div :class="['my-class', isActive ? 'active-class' : '', isHighlighted ? 'highlighted-class' : '']">
            <p>This is a paragraph element inside the div.</p>
            <button @click="isActive = !isActive">Toggle Active Class</button>
            <button @click="isHighlighted = !isHighlighted">Toggle Highlighted Class</button>
      </div>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    isActive: true,
                    isHighlighted: false
                }
            }

});
    </script>
    <style scoped>
        /* Styles for the outer div with id "app" */
        #app {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }

/* Styles for the inner div with dynamic classes */
        .my-class {
            border: 2px solid black;
            padding: 10px;
            margin-bottom: 20px;
        }

.active-class {
            background-color: blue;
            color: white;
        }

.highlighted-class {
            font-weight: bold;
        }

/* Styles for the paragraph element inside the div */
        p {
            font-size: 18px;
            line-height: 1.5;
        }

/* Styles for the buttons inside the div */
        button {
            background-color: white;
            border: 2px solid black;
            padding: 8px 12px;
            margin-right: 10px;
            cursor: pointer;
        }

button:hover {
            background-color: black;
            color: white;
        }
    </style>
</body>

</html>