screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{myJson}} <p>Vue Js Get first Two Character of String from JSON</p> <ul> <li v-for="day in firstTwoDays" :key="day">{{ day }}</li> </ul> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { myJson: { id: 24, days: [ { id: 1, day: "monday", }, { id: 2, day: "tuesday", }, { id: 3, day: "wednesday", }, { id: 4, day: "thrusday", }, { id: 5, day: "friday", }, { id: 6, day: "saturday", }, { id: 7, day: "sunday", } ] } } }, computed: { firstTwoDays() { return this.myJson.days.map(day => day.day.slice(0, 2)); } } }); </script> <style scoped> #app { background-color: lightblue; padding: 20px; font-family: Arial, sans-serif; } p { font-size: 18px; font-weight: bold; } ul { list-style: none; margin: 0; padding: 0; } li { font-size: 16px; margin-bottom: 10px; } </style> </body> </html>