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"> <h1>Vue Js Crypto Random Numbers:</h1> <ul> <li v-for="number in randomNumbers" :key="number">{{ number }}</li> </ul> <button @click="generateRandomNumbers">Generate</button> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { randomNumbers: [], }; }, mounted() { this.generateRandomNumbers(); // Generate random numbers when the component is mounted }, methods: { generateRandomNumbers() { const randomValues = new Uint32Array(10); // Generate an array of 10 random values window.crypto.getRandomValues(randomValues); // Generate cryptographically secure random values this.randomNumbers = Array.from(randomValues); // Convert the array to a regular array }, }, }) </script> <style scoped> #app { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; max-width: 600px; } h1 { font-size: 32px; font-weight: bold; margin-bottom: 16px; } ul { list-style: none; margin: 0; padding: 0; } li { font-size: 24px; margin-bottom: 8px; } button { background-color: #007bff; color: #fff; border: none; border-radius: 4px; font-size: 20px; font-weight: bold; padding: 12px 24px; cursor: pointer; margin-top: 16px; } button:hover { background-color: #0062cc; } </style> </body> </html>