screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@3.2.22/dist/vue.global.js"></script> </head> <body> <div id="app"> <h3> Vue Js Radio Button Checked if Statement is true</h3> <label> <input type="radio" value="true" v-model="selectedOption" :checked="condition === true"> Option 1 </label> <label> <input type="radio" value="false" v-model="selectedOption" :checked="condition === false"> Option 2 </label> </div> <script type="module"> const app = Vue.createApp({ data() { return { condition: true, selectedOption: '' } }, mounted() { this.selectedOption = this.condition ? 'true' : 'false'; }, watch: { selectedOption(option) { this.condition = option === 'true'; } } }) app.mount('#app') </script> <style scoped> #app { font-family: Arial, sans-serif; margin: 0 auto; max-width: 600px; padding: 20px; } h3 { color: #333; font-size: 24px; font-weight: bold; margin-bottom: 20px; } input[type="radio"] { margin-right: 10px; } label { display: inline-block; margin-right: 10px; } </style> </body> </html>