Vue 调色板

Vue调色板.gif

<template>
   <div>
        <h1 :style = "{width:`${250}px`,height:`${200}px`,color:'#000','font-size':`${15}px`,'background-color':`rgb(${r},${g},${b})`}">我的背景色是 R:{{r}} G :{{g}} B :{{b}}</h1>
        <p>R: <input min = "0" max="255" type="range" v-model = "r"><input min = "0" max="255" type="number" v-model = "r"></p>
        <p>G: <input min = "0" max="255" type="range" v-model = "g"><input min = "0" max="255" type="number" v-model = "g"></p>
        B: <input min = "0" max="255" type="range" v-model = "b"><input min = "0" max="255" type="number" v-model = "b">
   </div>
</template>
<script>
    export default {
        data(){
            return {
                r : 1,
                g : 255,
                b : 231
            }
        },
        methods : {
            add(){
                this.a+=10;
            }
        }
    }
</script>
<style>
    
</style>