Example
<!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>
