Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <title>'class' and 'v-bind:class'</title> <style> .impClass { font-weight: bolder; } .yelClass { background-color: rgb(255, 255, 136); } #app > div { border: dashed black 1px; width: 200px; margin: 20px; padding: 20px; } </style> </head> <body> <h1>Example: 'class' and 'v-bind:class'</h1> <p>The 'impClass' class is set in the normal way with the class attribute, and the 'yelClass' class is set with v-bind:class. The result is that Vue merges the classes so that the div element belongs to both classes.</p> <div id="app"> <div class="impClass" v-bind:class="{ yelClass: isYellow }">This div belongs to both 'impClass' and 'yelClass'.</div> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> const app = Vue.createApp({ data() { return { isYellow: true } } }) app.mount('#app') </script> </body> </html>
