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"> <p>JSON Objects:</p> <pre>{{ myObjects }}</pre> <p>Base64 Strings:</p> <pre>{{ base64Strings }}</pre> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { myObjects: [ { name: "Alice", age: 28, email: "alice@example.com" }, { name: "Bob", age: 35, contacts: [ { name: "Alice", email: "alice@example.com" }, { name: "Charlie", email: "charlie@example.com" } ], address: { street: "123 Main St", city: "Anytown", state: "CA", zip: "12345" } } ], base64Strings: [] }; }, methods: { convertToBase64() { for (let obj of this.myObjects) { const jsonString = JSON.stringify(obj); this.base64Strings.push(btoa(jsonString)); } } }, mounted() { this.convertToBase64(); } }) </script> <style scoped> #app { background-color: #f2f2f2; padding: 20px; font-family: Arial, sans-serif; font-size: 14px; } #app p { margin-top: 0; font-weight: bold; } #app pre { white-space: pre-wrap; word-wrap: break-word; background-color: #fff; border: 1px solid #ccc; padding: 10px; margin: 10px 0; } </style> </body> </html>