# 动态绑定style 利用v-bind:style来绑定一个内嵌样式。 ***** **注意：** 1. 我们可以使用驼峰式语法：比如font-size ---> `fontSize` 2. 或短横线分隔 `font-size` 绑定class有两种方式： 1. 对象语法 2. 数组语法 <br> ``` //每点击一次按钮，显示的颜色都不一样 <div id="app"> <!-- 给按钮绑定点击事件 操作style属性[]写法，里面传的是个{}，bool为真添加红色，为假添加绿色 --> <button @click="changeA" :style="[{color: bool ? 'red' : 'green'}]">我是个按钮</button> <!-- 对象写法 --> <button @click="changeA" :style="{color: bool ? 'red' : 'green'}">我还是个按钮</button> <!-- 点击按钮生成随机颜色 --> <button @click="changeA" :style="{color:randNum}">我是个随机颜色的按钮</button> <!-- 随机生成颜色同时改变大小 --> <!-- 写法一 --> <button @click="changeA" :style="{color:randNum,'font-size':'18px'}">我是个随机颜色的按钮</button> <!-- 写法二 驼峰命名 --> <button @click="changeA" :style="{color:randNum,fontSize:'20px'}">我是个随机颜色的按钮</button> </div> <script> // 实例vue new Vue({ el: '#app',//定义使用范围 data: {//定义使用变量 bool: false, randNum: 'rgb(0,0,0)',//初始化颜色 }, methods: {//定义使用方法 // es6写法 changeA() { this.bool = !this.bool;//取反 // 对象的randNum变量 = 调用生成随机数函数 this.randNum = 'rgb('+this.getRandcolor()+','+this.getRandcolor()+','+this.getRandcolor()+')'; }, getRandcolor() { // 向下取整 floor // 生成随机数的范围是0-255 return Math.floor(Math.random() * 256); } } }) </script> ```