調色板案例其中用到 v-model和v-bind · vue

``` <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> .div{ width: 100px; height: 100px; } </style> <title></title> </head> <body> <div id="app" v-clock> <div :style="{background:'rgb('+r+','+g+','+b+')'}" class="div"></div> <p> r: <input max="255" min="0" type="range" v-model="r"> <input type="number" max="255" min="0" v-model="r"/> </p> <p> g: <input max="255" min="0" type="range" v-model="g"> <input type="number" max="255" min="0" v-model="g"/> </p> <p> b: <input max="255" min="0" type="range" v-model="b"> <input type="number" max="255" min="0" v-model="b"/> </p> <button @click="add()">提交</button> </div> </body> <script src="vue/vue.js"></script> <script> var vue =new Vue({ el:"#app", data:{ r:100, g:100, b:100 }, methods:{ add(){ //獲取rgb值準備提交到后端 let log={ r:this.r, g:this.g, b:this.b } console.log(log); } } }) </script> </html> ```