【VUE】- 隨機顏色顯示

在開始顏色設置之前，首先我們需要知道Style與：Style的用法有什麼不同；

一、：Style的用法：

1、動態綁定

• :是v-bind的縮寫，是爲了動態綁定數據, 加上了冒號是爲了動態綁定數據，等號後面可以寫變量。

style="{'background-color':colorlists[Math.floor(Math.random()*10)],'float':index%2===0?'left':'right'}"

• 如果不使用冒號，等號後面就無法進行動態綁定數據了

二、函數：

1、Math.floor() //向下取整 floor

2、Math.random() //返回一個介於[0,1)之間的隨機數
返回一個0-10之間的隨機數：Math.random()*10

3、Math.floor()函數擴展

//向下取整 floor
Math.floor(0.99) //輸出0
Math.floor(-0.99) //輸出-1

//向上取整 ceil
Math.ceil(0.99)  //輸出1
Math.ceil(-0.99)  //輸出0

//四捨五入
Math.round(1.9) //輸出2
Math.round(-1.45) //輸出 -1

三、步驟

1、 Data中聲明、賦值顏色數組

// 作答卡片顏色設置
      colorlists: [
        'hsl(42, 48%, 54%)',
        'hsl(138, 24%, 48%)',
        'rgb(200, 138, 131)',
        'rgb(84, 221, 226)',
        'rgb(178, 199, 168)',
        'rgb(16, 195, 195)',
        'hsl(0, 21%, 68%)',
        'rgb(226, 166, 198)',
        'hsl(278, 17%, 66%)',
        'rgb(153, 199, 235)',
        'blueviolet'
      ]

2、綁定

<div
    v-for="(item, index) in brainStormAnswerList"
    v-show="isShow"
    :key="index"
    class="card"
    :style="{'background-color':colorlists[Math.floor(Math.random() * colorlists.length)],'float':index%2===0?'left':'right'}"
>

結果展示：