Vue调色板.gif
<template>
<div>
<h1 :style = "{width:`${250}px`,height:`${200}px`,color:'#000','font-size':`${15}px`,'background-color':`rgb(${r},${g},${b})`}">我的背景色是 R:{{r}} G :{{g}} B :{{b}}</h1>
<p>R: <input min = "0" max="255" type="range" v-model = "r"><input min = "0" max="255" type="number" v-model = "r"></p>
<p>G: <input min = "0" max="255" type="range" v-model = "g"><input min = "0" max="255" type="number" v-model = "g"></p>
B: <input min = "0" max="255" type="range" v-model = "b"><input min = "0" max="255" type="number" v-model = "b">
</div>
</template>
<script>
export default {
data(){
return {
r : 1,
g : 255,
b : 231
}
},
methods : {
add(){
this.a+=10;
}
}
}
</script>
<style>
</style>
注意注意 v-model 绑定，一旦使用了 v-model 操作了变量，那么变量就变成了字符串。
v-model变成了字符串
解决办法很简单只需要：
v-model.number 字符串就成了数组。
