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"> <h3>Vue Js Color Picker</h3> <div class="color-container"> <input type="color" v-model="selectedColor"> <div class="color-preview" :style="{ backgroundColor: selectedColor }"></div> </div> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { selectedColor: '#5E35B1' }; }, methods: { selectColor(color) { this.selectedColor = color; }, }, }); </script> <style scoped> #app { margin: 0 auto; max-width: 600px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); text-align: center; } .color-container { display: flex; align-items: center; gap: 200px; } .color-preview { width: 200px; height: 200px; } </style> </body> </html>