screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <h3>Vue Get Element by Key</h3> <div v-for="(item, index) in items" :key="index" ref="myElements"> {{ item }} </div> <p>Second Element: {{result}}</p> </div> <script type="module"> const app = Vue.createApp({ data() { return { items: ['item1', 'item2', 'item3'], result: '' } }, mounted() { const secondElement = this.$refs.myElements[1] this.result = secondElement.innerHTML } }) app.mount('#app') </script> <style scoped> #app { font-family: Arial, sans-serif; margin: 0 auto; width: 80%; } h3 { font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; } div { background-color: #f2f2f2; border-radius: 0.5rem; padding: 1rem; margin-bottom: 0.5rem; } p { font-size: 1.2rem; font-weight: bold; margin-top: 1rem; } </style> </body> </html>