# 動態綁定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> ```