<!DOCTYPE html> <html lang="en"> <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"> <title>Document</title> <script src="./lib/vue-2.6.12.js"></script> <style> .box { width: 200px; height: 200px; border: 1px solid #ccc; } </style> </head> <body> <div id="app"> <div> <span>R：</span> <input type="text" v-model.number="r"> </div> <div> <span>G：</span> <input type="text" v-model.number="g"> </div> <div> <span>B：</span> <input type="text" v-model.number="b"> </div> <hr> <!-- 专门用户呈现颜色的 div 盒子 --> <!-- 在属性身上，: 代表 v-bind: 属性绑定 --> <!-- :style 代表动态绑定一个样式对象，它的值是一个 { } 样式对象 --> <!-- 当前的样式对象中，只包含 backgroundColor 背景颜色 --> <div class="box" :style="{ backgroundColor: `rgb(${r}, ${g}, ${b})` }"> {{ `rgb(${r}, ${g}, ${b})` }} </div> <button @click="show">按钮</button> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { // 红色 r: 0, // 绿色 g: 0, // 蓝色 b: 0 }, methods: { // 点击按钮，在终端显示最新的颜色 show() { console.log(`rgb(${this.r}, ${this.g}, ${this.b})`) } }, }); </script> </body> </html>
