screen_rotation
Copied to Clipboard
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3>Vue Capitalize each word of a string value in an array of objects</h3> <ul> <li v-for="(person, index) in people" :key="index"> {{ capitalizeWords(person.name) }} </li> </ul> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { people: [ { name: "john doe", age: 25 }, { name: "jane smith", age: 30 }, { name: "jimmy carter", age: 40 }, ], }; }, methods: { capitalizeWords(str) { return str .toLowerCase() .split(" ") .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) .join(" "); }, }, }); </script> <style scoped> #app { font-family: Arial, sans-serif; background-color: #f5f5f5; padding: 20px; } h3 { font-size: 24px; font-weight: bold; margin-bottom: 10px; } ul { list-style: none; margin: 0; padding: 0; } li { font-size: 16px; margin-bottom: 5px; } li:last-child { margin-bottom: 0; } </style> </body> </html>