【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'}"
>

结果展示：