screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body :class="{ active: isBodyClassActive }"> <div id="app"> <h3>Vue js Add Remove class to Body Tag | Toggle class</h3> <button @click="toggleBodyClass">Toggle Body Class</button> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { isBodyClassActive: false, }; }, methods: { toggleBodyClass() { this.isBodyClassActive = !this.isBodyClassActive; }, }, watch: { isBodyClassActive(newVal) { if (newVal) { document.body.classList.add("active"); } else { document.body.classList.remove("active"); } }, }, }); </script> <style> body.active { background-color: lightgreen; } button { padding: 10px 20px; font-size: 18px; background-color: #4caf50; color: white; border: none; cursor: pointer; } </style> </body> </html>