调色器测试
调色器测试
<!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>
浙公网安备 33010602011771号