顏色變化

Created: November-22, 2018
<!doctype html>

<html>

<head>
    <title>Page Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0">
    <script src="vue.js"></script>
    <style>
        * {font-family: sans-serif;}
        #app {margin: 0 auto; width:500px;}
        button {
            background: #ccc;
            color: #fff;
            -webkit-appearance:none;
            background: #000;
            border: 0;
            padding: 10px;
            text-align: center;
            width: 49%;
        }
        .searchText{height: 25px;width: 386px;}
        .addItem {height: 30px;width: 226px; padding: 0 10px }
        button.active {
            background: #94d464;
            color: #fff;
        }
        .itemBox {margin: 0 0 10px 0;padding: 0;border: 1px dashed #000;}
        .itemBox li:first-child{background: #000; color:#fff; text-align: center;}
        .itemBox li:first-child span{background: #fff; color:#000;}
        .itemBox li{background: #f9f9f9; padding:10px; list-style: none;border-bottom: 1px dashed #000;}
        .itemBox li span { float: right;display: block;background: #94d464;height: 35px;margin: -8px -9px 0 0;width: 79px;text-align: center;line-height: 35px;}
    </style>
</head>

<body>
    <div id="app">
        <h2 v-bind:title="h1">{{h1}}</h2>
        <input type="range" v-model="range" min="10" step="1" max="100" @input="manage">
        <div :style="style"></div>
    </div>
</body>
<script>
    var data = {
        h1:"Color manage",
        range:10,
        style:{"height":"100px","width":"130px","background":"rgb(0, 0, 0)"}
    }
    var app = new Vue({
        el: "#app",
        data: data,
        methods: {
            manage:function(value){
                console.log(this.range)
                this.style["background"] = "rgb(0, "+this.range+", 0)"
            }
        },
        computed:{

        },
        filters:{

        },
    })

</script>

</html>