vue写调色板

组件开发App.vue

<template>
    <div>
        <div class="box" :style="{'background-color': `rgb(${r},${g},${b})`}"></div>
        <p>
            <input type="range" v-model="r" min="0" max="255">
            <input type="text" v-model="r" min="0" max="255">
        </p>
        <p>
            <input type="range" v-model="g" min="0" max="255">
            <input type="text" v-model="g" min="0" max="255">
        </p>
        <p>
            <input type="range" v-model="b" min="0" max="255">
            <input type="text" v-model="b" min="0" max="255">
        </p>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                r: 100,
                g: 200,
                b: 123
            }
        }
    }
</script>

<style>
    .box{
        width: 200px;
        height: 200px;
    }
</style>