screen_rotation
Copied to Clipboard
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app" class="my-app"> <h3 class="my-heading">Vue Js Get First Letter of Each Word in String Example</h3> <input v-model="inputText" @input="getFirstLetters" placeholder="Enter a string" class="my-input" /> <p class="my-paragraph">First Letters: {{ firstLetters }}</p> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { inputText: "Tata Consultancy Services", firstLetters: "" }; }, mounted() { this.getFirstLetters() }, methods: { getFirstLetters() { const words = this.inputText.split(" "); this.firstLetters = words.map(word => word.charAt(0)).join(""); } } }) </script> <style scoped> /* Style the outer container */ .my-app { font-family: Arial, sans-serif; text-align: center; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); width: 500px; margin: 0 auto; } /* Style for the heading */ .my-heading { color: #333; font-size: 24px; margin: 10px 0; } /* Style for the input field */ .my-input { width: 100%; padding: 10px; margin: 10px 0; border: 2px solid #4745dd; border-radius: 5px; font-size: 16px; outline: none; } /* Style for the paragraph displaying first letters */ .my-paragraph { font-size: 18px; color: #444; margin: 10px 0; } </style> </body> </html>