screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <h3>Vue js Generate Random RGB Color</h3> <div id="app"> <div :style="{ backgroundColor: bgColor, height: '100px', width: '100px' }"></div> <p>{{bgColor}}</p> <button @click="generateRandomColor">Generate RGB Color</button> </div> <script type="module"> const app = Vue.createApp({ data() { return { bgColor: 'rgb(225, 230, 93)' } }, methods: { generateRandomColor() { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); this.bgColor = `rgb(${r}, ${g}, ${b})`; } } }); app.mount('#app'); </script> </body> </html>