其他分享
首页 > 其他分享> > 调色器测试

调色器测试

作者:互联网

调色器测试

        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8">
                <title></title>
                <style>
                    p.picker{
                        width: 200px;
                        height: 200px;
                    }
                </style>
            </head>
            <body>
                <div id="app">
                    <p class="picker" :style="{background:'rgb('+r+','+g+','+b+')'}"></p>

                    <p >
                        r:<input  max="255" min="0" type="range" v-model = "r">
                        <input max="255" min="0" v-model = "r" type="number" >
                        <br/>
                        g:<input  max="255" min="0" type="range" v-model = "g">
                        <input max="255" min="0" v-model = "g" type="number" >
                        <br/>
                        b:<input  max="255" min="0" type="range" v-model = "b">
                        <input max="255" min="0" v-model = "b" type="number" >
                        <br/>
                    </p>
                </div>
                <script src="js/vue.min.js"></script>
                <script>
                    new Vue({
                        el:'#app',
                        data:{
                            r:20,
                            g:40,
                            b:50
                        },
                        methods:{

                        }
                    })
                </script>
            </body>
        </html>

标签:picker,el,Vue,测试,调色,200px
来源: https://www.cnblogs.com/188221creat/p/16289629.html