screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div :style="computedStyles"> <h3>Vue Conditional Style Binding</h3> <p :style="{color: textColor}"> This text will change color based on the value of isDarkMode. </p> <button @click="isDarkMode = !isDarkMode"> {{ isDarkMode ? "Disable" : "Enable" }} Dark Mode </button> </div> </div> <!-- Create a new Vue instance and pass it a configuration object --> <script type="module"> const app = new Vue({ el: "#app", // Set the root element of the app data() { return { isDarkMode: false, }; }, computed: { textColor() { return this.isDarkMode ? "white" : "black"; }, backgroundColor() { return this.isDarkMode ? "black" : "white"; }, computedStyles() { return { color: this.textColor, backgroundColor: this.backgroundColor, padding: "20px", }; }, }, }); </script> </body> </html>