screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Search Google</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <h3>Vue search text in Google on click Example</h3> <form @submit.prevent="searchGoogle"> <input type="text" v-model="searchTerm" placeholder="Search Google"> <button type="submit">Google it</button> </form> </div> <script type="module"> const app = Vue.createApp({ data() { return { searchTerm: 'vue get element by id', } }, methods: { searchGoogle() { const url = `https://www.google.com/search?q=${encodeURIComponent(this.searchTerm)}` window.open(url, '_blank') } } }); app.mount('#app'); </script> <style scoped> body { background-color: #f2f2f2; font-family: Arial, sans-serif; } #app { max-width: 400px; margin: 50px auto; background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } input[type="text"] { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #ccc; font-size: 16px; } button[type="submit"] { background-color: #4285f4; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease-in-out; margin-top: 1rem; } button[type="submit"]:hover { background-color: #357ae8; } </style> </body> </html>