screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3>Vue Js Get Last Word of string</h3> <input type="text" v-model="inputString" /> <button @click="getLastWord">Get Last Word</button> <p>Last Word: {{ lastWord }}</p> </div> <script> const app = new Vue({ el: "#app", data() { return { inputString: 'font awesome icons', lastWord: '' }; }, methods: { getLastWord() { const words = this.inputString.trim().split(' '); this.lastWord = words[words.length - 1]; } } }); </script> <style> #app { text-align: center; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24); width: 600px; margin: 0 auto; padding: 20px; } /* Heading styles */ h3 { font-size: 18px; margin-bottom: 10px; } /* Input styles */ input[type="text"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 3px; outline: none; transition: border-color 0.3s ease-in-out; } input[type="text"]:focus { border-color: #4a90e2; } /* Button styles */ button { display: block; width: 100%; padding: 10px; margin-top: 10px; background-color: #4a90e2; color: #fff; border: none; border-radius: 3px; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease-in-out; } button:hover { background-color: #1763a6; } /* Result paragraph styles */ p { margin-top: 20px; font-size: 16px; } </style> </body> </html>