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 Check if Element is Hidden</h3> <div ref="myElement" style="display:none">Hello World</div> <small>{{result}}</small> </div> <script type="module"> const app = Vue.createApp({ data() { return { condition: true, selectedOption: '', result: '' } }, mounted() { const myElement = this.$refs.myElement; const isHidden = myElement.style.display === 'none'; this.result = `Is the element hidden? ${isHidden}`; }, }) app.mount('#app') </script> <style scoped> #app { font-family: Arial, sans-serif; text-align: center; } #app h3 { font-size: 24px; font-weight: bold; } #app div[style="display:none"] { color: red; } #app small { display: block; margin-top: 20px; } </style> </body> </html>